Accessibility and how to get the most from your screenreader - Front End North

Building an interactive accessible website is often thought of as a black art. A look at the learnings from building the Government's website, GOV.UK. I will talk about real world accessibility and practical tips and tools you can use today. Covering the mistakes and pitfalls we made building GOV.UK I will explain how to check to see how you are currently doing, and how accessibility isn't,as scary as you first thought.

Transcript

1. Edd Sowden
 Senior Developer 
 Government Digital Service
 @edds
2. Accessibility and how to get the most from your screenreader GDS @edds
3. * I’m from the Government Digital Service GDS @edds
4. We’re a team at the heart of government building digital public services GDS @edds
5. * We started by building GOV.UK GDS @edds
6. * The best place to find government services and information GDS @edds
7. 9.5 million visitors every week GDS @edds
8. 9.5 million visitors every week Home to over 220 departments and organisations GDS @edds
9. GDS @edds 9.5 million visitors every week Home to over 220 departments and organisations Saved more than £62 million
10. * Relentlessly focused on user needs GDS @edds
11. GDS @edds
12. GDS @edds
13. GDS @edds
14. GDS @edds
15. GDS @edds
17. GOV.UK should work for everyone GDS @edds
18. Colour contrast GDS @edds
19. Colour contrast GDS @edds
20. How many of you use Apple products regularly? GDS @edds
21. How many of you test your websites in a screenreader? GDS @edds
22. Voiceover comes with OS X and iOS ! Windows and Gnome have Orca and NVDA that can be downloaded GDS @edds
23. 1. Developing a feature on GOV.UK 2. General learnings GDS @edds
24. Services and information GDS @edds
25. Quick prototype GDS @edds
27. Start with HTML GDS @edds
28. GDS @edds
29. <ul> <li> <h2>Benefits</h2> <ul> <li>Benefits entitlement</li> ... </ul> </li> <li>Births, deaths, marriages and care</li> ... </ul> GDS @edds
30. GDS @edds
31. <div> <ul> <li class="active">Benefits</li> <li>Births, deaths, marriages and care</li> ... </ul> </div> <div> <h1>Benefits</h1> <ul> <li>Certificates, register offices</li> ... </ul> </div> GDS @edds
32. Listen to your website GDS @edds
33. Let’s listen to how it sounds if we had just navigated to ‘Child benefits’ GDS @edds
34. Voiceover Keyboard shortcuts: ! Voiceover on/off: [⌘] + [F5] GDS @edds
36. The first thing in your markup should be the main part of the page GDS @edds
37. <div> <h1>Benefits</h1> <ul> <li>Certificates, register offices</li> ... </ul> </div> <div> <ul> <li class="active">Benefits</li> <li>Births, deaths, marriages and care</li> ... </ul> </div> GDS @edds
38. GDS @edds
40. We are happy with the markup. Next lets look at adding some JavaScript GDS @edds
41. ARIA Accessible Rich Internet Applications GDS @edds
42. “[ARIA] specifies how to increase the accessibility of web pages, in particular, dynamic content and user interface components developed with Ajax, HTML, JavaScript and related technologies” http://en.wikipedia.org/wiki/WAI-ARIA GDS @edds
43. <div aria-live=“off|polite|assertive”> GDS @edds
44. <div aria-live=“polite” aria-busy=“true|false”> GDS @edds
45. GDS @edds
46. GDS @edds
47. GDS @edds
48. https://gdstechnology.blog.gov.uk/2014/08/14/ improving-accessibility-on-gov-uk-search/ GDS @edds
49. aria-live is best used for status messages and notifications GDS @edds
50. GDS @edds
51. GDS @edds
52. We removed aria-live and instead move the currently focused element GDS @edds
53. GDS @edds
54. $(‘h1’).focus(); GDS @edds
55. <h1 tabindex=“-1”>...</h1> GDS @edds
57. GDS @edds Voiceover Keyboard shortcuts: ! Voiceover on/off: [⌘] + [F5] Voiceover key (VO): [ctrl] + [⌥] Continue reading: ! ! [VO] + [a]!
59. GDS @edds Voiceover Keyboard shortcuts: ! Voiceover on/off: [⌘] + [F5] Voiceover key (VO): [ctrl] + [⌥] Continue reading: [VO] + [a] Previous/next item:! ! [VO] + [right] or [left]!
61. Using focus rather than aria-live we also helped keyboard only users GDS @edds
63. Ship it! GDS @edds
64. General accessibility learnings GDS @edds
65. HTML5 enables you group items using semantic tags GDS @edds
66. <section aria-describedby="section-title"> <h2 id="section-title">...</h2> ... </section> GDS @edds
68. Voiceover Keyboard shortcuts: ! Voiceover on/off: [⌘] + [F5] Voiceover key (VO): [ctrl] + [⌥] Continue reading: [VO] + [a] Previous/next item: [VO] + [right] or [left] Enter region: ! ! ! [VO] + [⇧] + [down] ! Leave region: ! ! ! [VO] + [⇧] + [up] ! GDS @edds
69. Reading entire pages isn’t how people use their screen readers GDS @edds
70. Instead they can browse by headings to jump to content faster GDS @edds
71. Voiceover Keyboard shortcuts: ! Voiceover on/off: [⌘] + [F5] Voiceover key (VO): [ctrl] + [⌥] Continue reading: [VO] + [a] Previous/next item: [VO] + [right] or [left] Enter region: [VO] + [⇧] + [down] Leave region: [VO] + [⇧] + [up] Rotor window:! ! ! [VO] + [u] GDS @edds
73. Some ARIA properties need to exist at page load GDS @edds
74. To much markup GDS @edds
75. <ul> <li> <label for=“name”>Your name</label> <input id="name" name="name"> </li> <li> <label for=“email”>Your email</label> <input id="email" name="email"> </li> </ul> GDS @edds
76. ! ! <label for=“name”>Your name</label> <input id="name" name="name"> ! ! <label for=“email”>Your email</label> <input id="email" name="email"> ! GDS @edds
77. Listen to your website GDS @edds
78. Voiceover Keyboard shortcuts: ! Voiceover on/off: [⌘] + [F5] Voiceover key (VO): [ctrl] + [⌥] Continue reading: [VO] + [a] Previous/next item: [VO] + [right] or [left] Enter region: [VO] + [⇧] + [down] Leave region: [VO] + [⇧] + [up] Rotor window: [VO] + [u] GDS @edds
79. http://speakerdeck.com/edds GDS @edds
80. Edd Sowden
 Senior Developer 
 Government Digital Service
 @edds