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

5ce91fa49a613cbc3e20d5f96856473f?s=47 Edd S
November 15, 2014

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.

5ce91fa49a613cbc3e20d5f96856473f?s=128

Edd S

November 15, 2014
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. 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

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

  26. None
  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
  35. None
  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

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

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

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

    users GDS @edds
  62. None
  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

  67. None
  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
  72. None
  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