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

5ce91fa49a613cbc3e20d5f96856473f?s=47 Edd S
September 26, 2015

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.

5ce91fa49a613cbc3e20d5f96856473f?s=128

Edd S

September 26, 2015
Tweet

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

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

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

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

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

    Voiceover key (VO): [ctrl] + [⌥] Continue reading: ! [VO] + [a]!
  57. None
  58. @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 @edds
  61. None
  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

  67. None
  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
  73. None
  74. *

  75. None
  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!