Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Adventures in accessibility testing

Adventures in accessibility testing

Phil Sherry recently reworked some GOV.UK stuff with a view to making it more accessible. This talk covers how he went about this and how he tested his work

Frontend NE

May 04, 2017
Tweet

More Decks by Frontend NE

Other Decks in Programming

Transcript

  1. Adventures in accessibility testing Part one What is accessibility? Temporary

    impairments Assistive technology Easy wins: design and code – Intermission @nonswearyphil
  2. Adventures in accessibility testing Part one What is accessibility? Temporary

    impairments Assistive technology Easy wins: design and code – Intermission Part two Browser plugins VoiceOver on macOS & iOS NVDA on Windows Design patterns – Questions Pub @nonswearyphil
  3. Adventures in accessibility testing “accessibility” often written as: a11y a

    + 11 characters + y = a11y twitter.com/hashtag/a11y @nonswearyphil
  4. Making websites work for (blind | disabled) people? most people

    What is accessibility? – Adventures in accessibility testing
  5. Making sites and apps usable for the widest range of

    people, including — but not limited to — people with disabilities. you lovely people, after tonight What is accessibility? – Adventures in accessibility testing
  6. ALT: Temporary and situational impairments – Adventures in accessibility testing

    Stupid dog, sitting on top of a cat, demonstrating a physical impairment.
  7. ALT: Temporary and situational impairments – Adventures in accessibility testing

    A dog stressing-out a cat, resulting in a cognitive impairment.
  8. ALT: Temporary and situational impairments – Adventures in accessibility testing

    A cat that has only partially loaded due to an environment impairment.
  9. ALT: Temporary and situational impairments – Adventures in accessibility testing

    A cat’s member of staff being eaten alive while trying to work.
  10. ALT: A quick look at assistive technology – Adventures in

    accessibility testing THERE IS A NON-CAT THING ON THE SCREEN – it’s Joey, Chris’s service dog.
  11. ALT: A quick look at assistive technology – Adventures in

    accessibility testing Survey results for types of assistive technology used to access GOV.UK.
  12. ALT: A quick look at assistive technology – Adventures in

    accessibility testing Visually-impaired user with a screen magnifier.
  13. ALT: A quick look at assistive technology – Adventures in

    accessibility testing Visually-impaired user with motor issues, using a screen magnifier.
  14. ALT: A quick look at assistive technology – Adventures in

    accessibility testing User research with a fully-blind user and her Humanware Braillenote Touch.
  15. ALT: A quick look at assistive technology – Adventures in

    accessibility testing User research with a fully-blind user and her Humanware Braillenote Touch.
  16. ALT: A quick look at assistive technology – Adventures in

    accessibility testing https://twitter.com/HugoThePinkCat/status/846763206806847489
  17. ALT: A quick look at assistive technology – Adventures in

    accessibility testing One of many reasons why the clapping hands emoji is a fucking annoying trend.
  18. ALT: A quick look at assistive technology – Adventures in

    accessibility testing Stewie watching Brian puking after hearing that emoji abuse.
  19. ALT: A quick look at assistive technology – Adventures in

    accessibility testing A cat kicking-off about the massive abuse of emoji on Twitter.
  20. ALT: A quick look at assistive technology – Adventures in

    accessibility testing Poo emoji. Or is it smiling chocolate ice cream? Nah, it’s poo.
  21. ALT: A quick word about user research – Adventures in

    accessibility testing GOV.UK poster about user research. (github.com/alphagov/govdesign)
  22. ALT: A quick word about user research – Adventures in

    accessibility testing GOV.UK poster about user research. (github.com/alphagov/govdesign)
  23. ALT: A quick word about user research – Adventures in

    accessibility testing GOV.UK poster about user research. (github.com/alphagov/govdesign)
  24. ALT: Short story: Jack the a11y cat makes something more

    accessible Jack is complaining about the inaccessible state of his desk.
  25. ALT: Short story: Jack the a11y cat makes something more

    accessible Jack is trying his best to use his desk, despite lack of human thought.
  26. ALT: Short story: Jack the a11y cat makes something more

    accessible Jack has kicked the keyboard to the floor because fuck you.
  27. The ultimate decision-maker about whether or not something is accessible,

    is whether or not people can use it — not if it is “compliant” Derek Featherstone Easy wins: design and code – Adventures in accessibility testing
  28. Accessibility costs too much, plus we don’t have time. most

    developers Easy wins: design and code – Adventures in accessibility testing
  29. ALT: Easy wins: design and code – Adventures in accessibility

    testing Business man being business-as-fuck.
  30. Meh, we can just bolt that shit on at the

    end, right? most developers Easy wins: design and code – Adventures in accessibility testing
  31. ALT: Easy wins: design and code – Adventures in accessibility

    testing A cat eats a dog’s face for being an idiot.
  32. ALT: Easy wins: design and code – Adventures in accessibility

    testing A 19th-century painting which was unintentionally defaced during restoration.
  33. Easy wins: design and code – Adventures in accessibility testing

    Where I was previously mobile first… 1. Mobile 2. Desktop
  34. Easy wins: design and code – Adventures in accessibility testing

    Where I was previously mobile first… I’m now screen reader first. 1. Screen reader 2. Mobile 3. Desktop
  35. ALT: Easy wins: design and code – Adventures in accessibility

    testing A cat demonstrating the “if I fits, I sits” principle.
  36. ALT: Easy wins: design and code – Adventures in accessibility

    testing Application progress menu, small viewport version.
  37. ALT: Easy wins: design and code – Adventures in accessibility

    testing Black cat hiding in plain sight, in despair of human stupidity.
  38. ALT: Easy wins: design and code – Adventures in accessibility

    testing Lea Verou’s contrast checker tool (leaverou.github.io/contrast-ratio)
  39. ALT: Easy wins: design and code – Adventures in accessibility

    testing Four black cats, alike in every single way. No idea which is real. Nope.
  40. ALT: Easy wins: design and code – Adventures in accessibility

    testing Application progress menu, no selection.
  41. ALT: Easy wins: design and code – Adventures in accessibility

    testing Application progress menu, obvious selection on focus.
  42. ALT: Easy wins: design and code – Adventures in accessibility

    testing Application progress menu, nice big hit areas.
  43. ALT: Easy wins: design and code – Adventures in accessibility

    testing A cat who doesn’t give a fuck about your shit.
  44. ALT: Easy wins: design and code – Adventures in accessibility

    testing new `prefers-reduced-motion` media query (webkit.org/blog/7477)
  45. ALT: Easy wins: design and code – Adventures in accessibility

    testing macOS accessibility preferences option to reduce motion.
  46. Just add alt tags, yeah? most developers Easy wins: design

    and code – Adventures in accessibility testing
  47. ALT: Easy wins: design and code – Adventures in accessibility

    testing Death glare from a feline HTML enthusiast.
  48. ALT: Easy wins: design and code – Adventures in accessibility

    testing Alternative text is an attribute attached to an element, or “tag”. <alt text=“”> <img /> </at> <img alt=“” /> ❌ ✅
  49. ALT: Easy wins: design and code – Adventures in accessibility

    testing Cat filling in a tuna import duty form.
  50. ALT: Easy wins: design and code – Adventures in accessibility

    testing FrontendNE sign-up form in VoiceOver on macOS.
  51. ALT: Easy wins: design and code – Adventures in accessibility

    testing FrontendNE sign-up form – revised.
  52. ALT: Easy wins: design and code – Adventures in accessibility

    testing FrontendNE sign-up form – revised.
  53. ALT: A word about roles and ARIA – Adventures in

    accessibility testing A cat ponders accessibility matters over breakfast.
  54. A word about roles and ARIA – Adventures in accessibility

    testing 1.<div role=“banner”> 2.<div role=“navigation”> 3.<div role=“main”> 4. <div role=“article”> 5. <div role=“region”> 6. <div role=“complementary”> 7.<div role=“contentinfo”>
  55. ALT: A word about roles and ARIA – Adventures in

    accessibility testing Browser showing divs with explicit roles.
  56. A word about roles and ARIA – Adventures in accessibility

    testing 1.<header role=“banner”> 2.<nav role=“navigation”> 3.<main role=“main”> 4. <article role=“article”> 5. <section role=“region”> 6. <aside role=“complementary”> 7.<footer role=“contentinfo”>
  57. ALT: A word about roles and ARIA – Adventures in

    accessibility testing Browser showing semantic elements with explicit roles.
  58. A word about roles and ARIA – Adventures in accessibility

    testing Browsers take care of the following landmark roles: <header> maps to role=“banner” * <nav> maps to role=“navigation” <main> maps to role=“main” <article> maps to role=“article” <section> maps to role=“region” <aside> maps to role=“complementary” ** <footer> maps to role=“contentinfo” * * if not within an article or section element ** recently proposed
  59. A word about roles and ARIA – Adventures in accessibility

    testing 1.<header> 2.<nav> 3.<main> 4. <article> 5. <section> 6. <aside> 7.<footer>
  60. ALT: A word about roles and ARIA – Adventures in

    accessibility testing Browser showing semantic elements with implicit roles.
  61. ALT: A word about roles and ARIA – Adventures in

    accessibility testing VoiceOver rotor showing landmarks.
  62. ALT: A word about roles and ARIA – Adventures in

    accessibility testing Luke Stevens’ book, The Truth About HTML5 (Apress / thetruthabouthtml5.com)
  63. ALT: A word about roles and ARIA – Adventures in

    accessibility testing FrontendNE sign-up form – revised.
  64. ALT: A word about roles and ARIA – Adventures in

    accessibility testing FrontendNE sign-up form – revised.
  65. ALT: A word about roles and ARIA – Adventures in

    accessibility testing W3C’s guide to Using ARIA (w3c.github.io/using-aria)
  66. ALT: A word about performance – Adventures in accessibility testing

    Cats who heard there was a mouse around here somewhere.
  67. ALT: A word about performance – Adventures in accessibility testing

    A whole bunch of cats. (Yes, it’s Photoshopped, but shush. Believe.)
  68. ALT: A word about performance – Adventures in accessibility testing

    Not even sure where to begin with this one. Some kinda cat launchpad.
  69. ALT: A word about performance – Adventures in accessibility testing

    Mog on the Tyne’s cats, available for many concurrent users.
  70. Adventures in accessibility testing Part one What is accessibility? Temporary

    impairments Assistive technology Easy wins: design and code – Intermission Part two Browser plugins VoiceOver on macOS & iOS NVDA on Windows Design patterns – Questions Pub
  71. ALT: A very quick look at browser plugins – Adventures

    in accessibility testing WAVE plugin for Chrome.
  72. ALT: A very quick look at browser plugins – Adventures

    in accessibility testing aXe plugin for Chrome.
  73. ALT: A very quick look at browser plugins – Adventures

    in accessibility testing aXe plugin for Chrome, showing a bunch of errors.
  74. ALT: A very quick look at browser plugins – Adventures

    in accessibility testing Tenon plugin for Chrome, by @KarlGroves.
  75. ALT: A very quick look at browser plugins – Adventures

    in accessibility testing Google’s Accessibility plugin for Chrome.
  76. ALT: A very quick look at browser plugins – Adventures

    in accessibility testing WCAG’s Accessibility Audit plugin for Chrome.
  77. ALT: A very quick look at browser plugins – Adventures

    in accessibility testing Google’s Chromevox plugin for Chrome.
  78. ALT: A very quick look at browser plugins – Adventures

    in accessibility testing Google’s Chromevox plugin for Chrome – just say No.
  79. ALT: A very quick look at browser plugins – Adventures

    in accessibility testing Google’s Accessibility Experiment pane in Chrome.
  80. ALT: A very quick look at browser plugins – Adventures

    in accessibility testing Search for how to activate Google’s Accessibility Experiment pane in Chrome.
  81. ALT: A very quick look at browser plugins – Adventures

    in accessibility testing Accessible Technology (software) list on Trello
  82. ALT: A very quick look at browser plugins – Adventures

    in accessibility testing Ghostery privacy plugin for Chrome.
  83. A quick look at screen readers – Adventures in accessibility

    testing VoiceOver on macOS VoiceOver on iOS NVDA on Windows
  84. ALT: A quick look at screen readers – Adventures in

    accessibility testing A map of VoiceOver key commands for macOS
  85. ALT: A quick look at screen readers – Adventures in

    accessibility testing Key commands for turning on VoiceOver on macOS.
  86. ALT: A quick look at screen readers – Adventures in

    accessibility testing Key commands for turning on VoiceOver’s rotor on macOS.
  87. ALT: A quick look at screen readers – Adventures in

    accessibility testing VoiceOver Utility’s web rotor options.
  88. ALT: A quick look at screen readers – Adventures in

    accessibility testing VoiceOver Utility’s web rotor showing the headings menu on GOV.UK.
  89. ALT: A quick look at screen readers – Adventures in

    accessibility testing VoiceOver Utility’s verbosity options.
  90. ALT: A quick look at screen readers – Adventures in

    accessibility testing Apple’s VoiceOver Getting Started Guide. (apple.com/voiceover/info/guide)
  91. ALT: A quick look at screen readers – Adventures in

    accessibility testing VoiceOver’s rotor on iOS
  92. ALT: A quick look at screen readers – Adventures in

    accessibility testing Apple’s iOS accessibility guide (help.apple.com/iphone/10/#/iph3e2e4367)
  93. ALT: A quick look at screen readers – Adventures in

    accessibility testing Yahoo’s David Pogue with Joe Danowsky, using iOS VoiceOver
  94. A quick look at screen readers – Adventures in accessibility

    testing • JAWS (Job Access With Speech) – £700 • Dolphin’s Guide – £620 • Dolphin’s SuperNova – £1120 • Windows Narrator – free (only in Windows 10) • NVDA (NonVisual Desktop Access) – free
  95. ALT: A quick look at screen readers – Adventures in

    accessibility testing Paciello Group’s page about basic screen reader commands
  96. ALT: A quick look at screen readers – Adventures in

    accessibility testing Understanding screen reader interaction modes, by Léonie Watson.
  97. ALT: A look at some design patterns– Adventures in accessibility

    testing Stealth cat sneaks in when the product owner isn’t looking.
  98. Design patterns: anchor context – Adventures in accessibility testing 1.<p

    class=“h1”>Oh dear</p> 2.<h3 class=“header-h2”>Sigh</h3>
  99. Design patterns: anchor context – Adventures in accessibility testing 1.<p

    class=“h1”>Oh dear</p> 2.<h3 class=“header-h2”>Sigh</h3> 3.<div id=“h2”><span class=“h1”> 4. OMFG, SRSLY 5.</span></div>
  100. ALT: Design patterns: heading levels – Adventures in accessibility testing

    Browser showing regular heading levels with default styles.
  101. ALT: Design patterns: heading levels – Adventures in accessibility testing

    Browser showing suggested multiple header level 1 – just say no.
  102. ALT: Design patterns: heading levels – Adventures in accessibility testing

    VoiceOver showing suggested multiple header level 1 – just say no.
  103. Design patterns: anchor context – Adventures in accessibility testing I

    went to a clickbait conference, and what happened next blew my mind. Read more.
  104. ALT: Design patterns: anchor context – Adventures in accessibility testing

    VoiceOver showing lots of context-free “read more” links.
  105. ALT: Design patterns: anchor context – Adventures in accessibility testing

    A visually hidden cat. (I had to think pretty hard how to include this one.)
  106. Design patterns: anchor context – Adventures in accessibility testing 1.<a

    href=“#”> 2. Read more 3. <span class=“visuallyhidden”> 4. [add some context here] 5. </span> 6.</a>.
  107. Design patterns: anchor context – Adventures in accessibility testing 1..visuallyhidden

    { 2. border: 0; 3. clip: rect(0 0 0 0); 4. height: 1px; 5. margin: -1px; 6. overflow: hidden; 7. padding: 0; 8. position: absolute; 9. width: 1px; 10.}
  108. ALT: Design patterns: anchor context – Adventures in accessibility testing

    A “read more” link with visually-hidden context.
  109. ALT: Design patterns: anchor context – Adventures in accessibility testing

    VoiceOver showing lots of “read more” links with added context.
  110. Design patterns: anchor context – Adventures in accessibility testing 1..visuallyhidden:active,

    2..visuallyhidden:focus { 3. clip: auto; 4. height: auto; 5. margin: 0; 6. overflow: visible; 7. position: static; 8. width: auto; 9.}
  111. ALT: Design patterns: anchor context – Adventures in accessibility testing

    GOV.UK’s “Skip to main content” link, with focus.
  112. ALT: Design patterns: page header – Adventures in accessibility testing

    Standard GOV.UK Elements page header – original markup.
  113. Design patterns: page header – Adventures in accessibility testing 1.<h1

    class="heading-xlarge"> 2. <span class="heading- secondary">FrontendNE</span> 3. Adventures in accessibility testing 4.</h1>
  114. ALT: Design patterns: page header – Adventures in accessibility testing

    Standard GOV.UK Elements page header – original markup, VoiceOver in iOS.
  115. ALT: Design patterns: page header – Adventures in accessibility testing

    Standard GOV.UK Elements page header – original markup, VoiceOver in macOS.
  116. ALT: Design patterns: page header – Adventures in accessibility testing

    Standard GOV.UK Elements page header – original markup, NVDA in Windows.
  117. ALT: Design patterns: page header – Adventures in accessibility testing

    Standard GOV.UK Elements page header – original markup, NVDA in Windows.
  118. ALT: Design patterns: page header – Adventures in accessibility testing

    Standard Gov.UK Elements page header – old and revised versions.
  119. ALT: Design patterns: page header – Adventures in accessibility testing

    Standard Gov.UK Elements page header – old and revised, VoiceOver on macOS.
  120. Design patterns: page header – Adventures in accessibility testing 1.<header

    class="page-header"> 2. <h1 class=“heading-xlarge"> 3. Adventures in accessibility testing 4. </h1> 5. <p class=“heading-secondary"> 6. <span class="visuallyhidden">This section is </span> 7. FrontendNE</p> 8.</header>
  121. Design patterns: page header – Adventures in accessibility testing 1..page-header

    { 2. clear: both; 3. display: table; 5. .heading-secondary { 6. display: table-header-group; 7. } 8.}
  122. ALT: Design patterns: page header – Adventures in accessibility testing

    Standard GOV.UK Elements page header – revised markup, VoiceOver in iOS.
  123. ALT: Design patterns: page header – Adventures in accessibility testing

    Standard GOV.UK Elements page header – revised markup, VoiceOver in macOS.
  124. ALT: Design patterns: page header – Adventures in accessibility testing

    Standard GOV.UK Elements page header – revised markup, NVDA in Windows.
  125. ALT: Design patterns: page header – Adventures in accessibility testing

    Standard GOV.UK Elements page header – revised markup, NVDA in Windows.
  126. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers in the GOV.UK prototype kit. Original version.
  127. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers in the GOV.UK prototype kit. Original version, mobile size.
  128. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers in the GOV.UK prototype kit. Headings menu in VoiceOver.
  129. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers in the GOV.UK prototype kit. VoiceOver in macOS.
  130. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers in the GOV.UK prototype kit. NVDA on Windows.
  131. Design patterns: check your answers – Adventures in accessibility testing

    Original version ▸ uses a table – isn’t tabular data ▸ lacking in semantics ▸ hard to navigate ▸ not great for users of screen magnifiers ▸ ridiculously verbose for users of screen readers
  132. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers. New GDS version, mobile size.
  133. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers. New GDS version. Headings menu in VoiceOver on macOS.
  134. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers. New GDS version. Links menu in VoiceOver on macOS.
  135. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers. New GDS version. VoiceOver on macOS.
  136. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers. New GDS version. NVDA on Windows.
  137. Design patterns: check your answers – Adventures in accessibility testing

    1.<dl class="check-your-answers multiple-sections"> 2. <div class="set"> 3. <dt class="question item"> 4. Name 5. </dt> 6. <dd class="answer item"> 7. Sarah Philips 8. </dd> 9. <dd class="change item"> 10. <a href="#"> 11. Change <span class="visuallyhidden">name</span> 12. </a> 13. </dd> 14. </div> 15.</dl>
  138. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers. New GDS version with our data.
  139. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers. New GDS version with our data, mobile size.
  140. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers v3.1. My new version with my page header and our data.
  141. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers v3.1. My new version, mobile size.
  142. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers v3.1. VoiceOver headings menu on macOS.
  143. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers v3.1. VoiceOver links menu on macOS.
  144. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers v3.1. VoiceOver reads through the page on macOS.
  145. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers v3.1. NVDA reads through the page on Windows.
  146. Design patterns: check your answers – Adventures in accessibility testing

    1.<div class="check-your-answers"> 2. <h2 class="heading-small">Is your business currently registered for anti-money laundering supervision?</h2> 3. <span class="visuallyhidden">Answer: </span> 4. <p>Money laundering regulations number: 45628975</p> 5. <footer class="group"> 6. <p><a href="registered" class="edit">Edit<span class="visuallyhidden"> your answer for “Is your business currently registered for anti-money laundering supervision?”</span></a></p> 7. </footer> 8.</div>
  147. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Visually-impaired user with a screen magnifier, during a user research session.
  148. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Angry cat with a box that doesn’t quite meet its needs due to lack of research.
  149. Quick takeaways – Adventures in accessibility testing • this is

    for everyone • think screen reader first, mobile second, desktop third
  150. Quick takeaways – Adventures in accessibility testing • this is

    for everyone • think screen reader first, mobile second, desktop third • use sensible, semantic markup
  151. Quick takeaways – Adventures in accessibility testing • this is

    for everyone • think screen reader first, mobile second, desktop third • use sensible, semantic markup • use ARIA roles if necessary
  152. Quick takeaways – Adventures in accessibility testing • this is

    for everyone • think screen reader first, mobile second, desktop third • use sensible, semantic markup • use ARIA roles if necessary • sit in on user research
  153. Quick takeaways – Adventures in accessibility testing • this is

    for everyone • think screen reader first, mobile second, desktop third • use sensible, semantic markup • use ARIA roles if necessary • sit in on user research • get familiar with assistive technology
  154. Quick takeaways – Adventures in accessibility testing • this is

    for everyone • think screen reader first, mobile second, desktop third • use sensible, semantic markup • use ARIA roles if necessary • sit in on user research • get familiar with assistive technology • be responsible for accessibility where you work
  155. Quick takeaways – Adventures in accessibility testing • this is

    for everyone • think screen reader first, mobile second, desktop third • use sensible, semantic markup • use ARIA roles if necessary • sit in on user research • get familiar with assistive technology • be responsible for accessibility where you work • be a decent human and help others
  156. ALT: One more thing… – Adventures in accessibility testing The

    cats at Mog on the Tyne and Westgate Ark await your presence.