Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns

Building an interactive accessible website is often thought of as a black art. It is commonly believed that JavaScript powered sites can't be accessible. Covering some of the mistakes and pitfalls his team made building GOV.UK, including building a single page "app", Edd will explain how you can check to see how you are currently doing. He will show you how checking your accessibility isn't as scary as you first thought. Edd will cover real world accessibility and give you practical tips and tools you can use to improve your sites today.

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. GDS @edds 12 million visitors every week Home to over 330 departments and organisations Saving more than £60 million a year
8. * Relentlessly focused on user needs GDS @edds
9. GDS @edds
10. GDS @edds
11. GDS @edds
12. GDS @edds
13. GDS @edds
15. GOV.UK should work for everyone GDS @edds
16. Colour contrast GDS @edds
17. Colour contrast GDS @edds
18. How many of you use Apple products regularly? GDS @edds
19. How many of you test your websites in a screenreader? GDS @edds
20. Voiceover comes with OS X and iOS ! Windows and Gnome have NVDA and Orca that can be downloaded GDS @edds
21. 1. Developing a feature on GOV.UK 2. General learnings GDS @edds
22. Services and information GDS @edds
23. Quick prototype GDS @edds
25. Start with HTML
26. GDS @edds
27. <ul> <li> <h2>Benefits</h2> <ul> <li>Benefits entitlement</li> ... </ul> </li> <li>Births, deaths, marriages and care</li> ... </ul> GDS @edds
28. GDS @edds
29. <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
30. Listen to your website
31. Let’s listen to how it sounds if we had just navigated to ‘Child benefits’ GDS @edds
32. Voiceover Keyboard shortcuts: ! Voiceover on/off: [⌘] + [F5] GDS @edds
34. The first thing in your markup should be the main part of the page GDS @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> GDS @edds
36. GDS @edds
38. We are happy with the markup. Next let’s look at adding some JavaScript GDS @edds
39. ARIA Accessible Rich Internet Applications GDS @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 GDS @edds
41. <div aria-live=“off|polite|assertive”> GDS @edds
42. <div aria-live=“polite” aria-busy=“true|false”> GDS @edds
43. GDS @edds
44. GDS @edds
45. GDS @edds
46. https://gdstechnology.blog.gov.uk/2014/08/14/ improving-accessibility-on-gov-uk-search/ GDS @edds
47. aria-live is best used for status messages and notifications GDS @edds
48. GDS @edds
49. GDS @edds
50. We removed aria-live and instead move the currently focused element GDS @edds
51. GDS @edds
52. $(‘h1’).focus(); GDS @edds
53. <h1 tabindex=“0”>...</h1> GDS @edds
54. <h1 tabindex=“-1”>...</h1> GDS @edds
56. GDS @edds Voiceover Keyboard shortcuts: ! Voiceover on/off: [⌘] + [F5] Voiceover key (VO): [ctrl] + [⌥] Continue reading: ! ! [VO] + [a]!
58. GDS @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 GDS @edds
62. Ship it! GDS @edds
63. General accessibility learnings GDS @edds
64. HTML5 enables you group items using semantic tags GDS @edds
65. <section aria-describedby="section-title"> <h2 id="section-title">...</h2> ... </section> GDS @edds
66. 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 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 and admissions 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 Services and information Changes to vehicle tax From 1 October 2014, you won’t need a paper tax disc and you’ll be able to pay by GOV.UK blogs Search the list of GOV.UK blogs, and find one to match your interest. Keep warm this winter Find out how to save energy and keep warm this winter. 24 Ministerial departments 331 Other agencies and public bodies The websites of all government departments and many other agencies and public bodies are being merged into GOV.UK. Here you can see all policies, announcements, publications, statistics and consultations. 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 (tax disc) Log in to student finance Book your theory test Employment and Support Allowance Search GOV.UK GDS @edds
70. 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
71. Reading entire pages isn’t how people use their screen readers GDS @edds
72. Instead they can browse by headings and links to jump to content faster GDS @edds
73. 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
76. *
79. Some ARIA properties need to exist at page load GDS @edds
80. Too much markup GDS @edds
81. <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
82. ! ! <label for=“name”>Your name</label> <input id="name" name="name"> ! ! <label for=“email”>Your email</label> <input id="email" name="email"> ! GDS @edds
83. Listen to your website
84. 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
85. http://speakerdeck.com/edds GDS @edds
86. Edd Sowden
 Senior Developer 
 Government Digital Service
 @edds