Accessibility and how to get the most from your screenreader - EpicFEL

Building an interactive accessible website is often thought of as a black art. Covering some of the mistakes and pitfalls we made building GOV.UK, including building a single page "app", I will explain how you can check to see how accessible your websites are. You should come away armed with the ability to start checking and improving your sites today.

Transcript

1. * Accessibility and how to get the most from your screenreader
2. 1. Background ! 2. Developing a single page JavaScript thing on GOV.UK ! 3. General accessibility learnings @edds
3. Up until a week ago I was a Senior Developer at the Government Digital Service @edds
4. Building the Government’s award winning GOV.UK @edds
5. However, let’s just clear something up quite quickly… @edds
6. …just because I’m a former Government employee… @edds
7. …and I know what you’re all thinking… @edds
8. @edds …it’s: Edd Sowden not Ed Snowden
9. GOV.UK is the best place to find government information and services @edds
10. @edds
11. @edds
12. @edds
13. @edds
14. How many of you use Apple products regularly? @edds
15. How many of you test your websites in a screenreader? @edds
16. Voiceover comes with OS X and iOS, you already have it. @edds
17. * Developing a single page JavaScript thing on GOV.UK
18. Benefits Includes tax credits, eligibility and appeals Births, deaths, marriages and care Parenting, civil partnerships, divorce and Lasting Power of Attorney Business and self-employed Tools and guidance for businesses Childcare and parenting Includes giving birth, fostering, adopting, benefits for children, childcare and schools Citizenship and living in the UK Voting, community participation, life in the UK, international projects Crime, justice and the law Legal processes, courts and the police Disabled people Includes carers, your rights, benefits and the Equality Act Driving and transport Includes vehicle tax, MOT and driving licences Education and learning Includes student loans, admissions and apprenticeships Employing people Includes pay, contracts and hiring Environment and countryside Includes flooding, recycling and wildlife Housing and local services Owning or renting and council services Money and tax Includes debt and Self Assessment Passports, travel and living abroad Includes renewing passports and travel advice by country Visas and immigration Visas, asylum and sponsorship Working, jobs and pensions Includes holidays and finding a job 24 Ministerial departments 331 Other agencies and public bodies The websites of all government departments and many other agencies and public bodies have been merged into GOV.UK. Here you can see all policies, announcements, publications, statistics and consultations. Find out how government services are performing and how satisfied users are. GOV.UK Welcome to GOV.UK The best place to find government services and information Simpler, clearer, faster Popular on GOV.UK Universal Jobmatch job search Renew vehicle tax Log in to student finance Book your theory test Employment and Support Allowance Search GOV.UK Browse @edds
19. Quick prototype @edds
21. Let’s build it… @edds
22. * By starting with HTML you’re forced to think about what you want to say to your users
23. @edds
24. @edds
25. <ul> <li> <h2>Benefits</h2> <ul> <li>Benefits entitlement</li> ... </ul> </li> <li>Births, deaths, marriages and care</li> ... </ul> @edds
26. @edds
27. <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> @edds
28. Let’s open that markup in our screen reader @edds
29. * Listening to your website lets you find out if it’s saying what you intended it to say
30. @edds Voiceover Keyboard shortcuts: ! Voiceover on/off: [⌘] + [F5]
31. By default VoiceOver will read the entire page when you navigate to it @edds
32. Let’s pretend we had just navigated to ‘Child benefits’ @edds
34. The first thing in your markup should be the main part of the page @edds
35. <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> @edds
36. @edds
38. We are happy with the markup. Next let’s look at adding some JavaScript @edds
39. ARIA Accessible Rich Internet Applications @edds
40. “[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 @edds
41. @edds aria-atomic aria-busy (state) aria-controls aria-describedby aria-disabled (state) aria-dropeffect aria-flowto aria-grabbed (state) aria-haspopup aria-hidden (state) aria-invalid (state) aria-label aria-labelledby aria-live aria-owns aria-relevant
42. <div aria-live=“off|polite|assertive”> @edds
43. <div aria-live=“polite” aria-busy=“true|false”> @edds
44. @edds
45. @edds GDS @edds
46. https://gdstechnology.blog.gov.uk/2014/08/14/ improving-accessibility-on-gov-uk-search/ @edds
47. aria-live is best used for status messages or notifications not blocks of text @edds
48. @edds
49. @edds
50. We removed aria-live and instead move focus to the newly added heading @edds
51. @edds
52. $(‘h1’).focus(); @edds
53. <h1 tabindex=“0”>...</h1> @edds
54. <h1 tabindex=“-1”>...</h1> @edds
56. @edds Voiceover Keyboard shortcuts: ! Voiceover on/off: [⌘] + [F5] Voiceover key (VO): [ctrl] + [⌥] Continue reading: ! [VO] + [a]!
58. @edds Voiceover Keyboard shortcuts: ! Voiceover on/off: [⌘] + [F5] Voiceover key (VO): [ctrl] + [⌥] Continue reading: [VO] + [a] Previous/next item:! [VO] + [right] or [left]!
60. By using focus rather than aria-live we also helped keyboard only users @edds
62. Ship it! @edds
63. * General accessibility learnings
64. 1. ! HTML5 enables you group items using semantic tags, aria lets you name them @edds
65. <section aria-describedby="section-title"> <h2 id="section-title">...</h2> ... </section> @edds
66. @edds
68. @edds 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] !
69. 2.! ! Reading entire pages from start to finish often isn’t how people use screen readers @edds
70. Screen reader users can browse by headings and links to jump to content @edds
71. @edds 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]
72. Departments Worldwide How government works Get involved Policies Publications Consultations Statistics Announcements GOV.UK Guidance Pet cemeteries: where you can build them and how to register From: Animal and Plant Health Agency and Department for Environment, Food & Rural Affairs First published: 5 September 2014 Last updated: 13 October 2014 , see all updates Part of: Guidance for the animal by-product industry, Protecting animal health and preventing disease, including in trade, Food and farming and + others Applies to: England, Scotland and Wales The animal carcasses you bury at a pet cemetery are animal by-products (ABPs). Find out about the different categories of ABP. Building your pet cemetery Where you can build a pet cemetery, the animals you can bury there, how it must be built and how to register. Contents Building your pet cemetery Where you can build a pet cemetery How your pet cemetery must be built Search @edds
74. *
76. 3.! ! Some ARIA properties need to exist at page load to be picked up by Accessibility APIs @edds
77. 4.! ! Avoid recreating native elements @edds
78. @edds
79. @edds <a href=“#" class=“button”> Start now </a>
80. Dictation users say what they see, like “click button” @edds
81. <a href=“#" class=“button” role=“button”> Start now </a> @edds
82. When attempting to recreate native elements it’s easy to forget to add accessibility hooks, like using space bar to click buttons. @edds
83. 5.! ! Don’t add too much extra “semantic” markup @edds
84. <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> @edds
85. @edds ! ! <label for=“name”>Your name</label> <input id="name" name="name"> ! ! <label for=“email”>Your email</label> <input id="email" name="email"> !
86. In summary… @edds
87. * Start with HTML as! it forces you to think about what you want to say to your users
88. * Listen to your website to see if your message is communicated to your users
89. * Edd Sowden
 @edds Thank you!