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

5ce91fa49a613cbc3e20d5f96856473f?s=47 Edd S
February 11, 2015

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.

5ce91fa49a613cbc3e20d5f96856473f?s=128

Edd S

February 11, 2015
Tweet

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

  14. None
  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

  24. None
  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
  33. None
  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

  37. None
  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

  55. None
  56. GDS @edds Voiceover Keyboard shortcuts: ! Voiceover on/off: [⌘] +

    [F5] Voiceover key (VO): [ctrl] + [⌥] Continue reading: ! ! [VO] + [a]!
  57. None
  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]!
  59. None
  60. By using focus rather than aria-live we also helped keyboard

    only users GDS @edds
  61. None
  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
  67. None
  68. None
  69. None
  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
  74. None
  75. None
  76. *

  77. None
  78. None
  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