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. Phil Sherry at FrontendNE @nonswearyphil Accessibility testing Adventures in…

  2. None
  3. ALT: Adventures in accessibility testing Simon Sherry at Kuchaman Fort,

    Rajasthan, in 2001. (eyefund.info)
  4. ALT: Adventures in accessibility testing Global Accessibility Awareness Day on

    May 18th
  5. Adventures in accessibility testing Part one What is accessibility? Temporary

    impairments Assistive technology Easy wins: design and code – Intermission @nonswearyphil
  6. 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
  7. ! Questions @nonswearyphil Adventures in accessibility testing

  8. Part one

  9. Adventures in accessibility testing “accessibility” often written as: a11y @nonswearyphil

  10. Adventures in accessibility testing “accessibility” often written as: a11y a

    + 11 characters + y = a11y @nonswearyphil
  11. Adventures in accessibility testing “accessibility” often written as: a11y a

    + 11 characters + y = a11y twitter.com/hashtag/a11y @nonswearyphil
  12. Please tag things with… @nonswearyphil Adventures in accessibility testing #a11yatFNE

  13. None
  14. Phil Sherry at FrontendNE @nonswearyphil Accessibility? What is…

  15. Making websites work for (blind | disabled) people? most people

    What is accessibility? – Adventures in accessibility testing
  16. ALT: What is accessibility? – Adventures in accessibility testing Stern

    look from a massively unimpressed cat.
  17. 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
  18. This is for everyone. Sir Tim Berners-Lee What is accessibility?

    – Adventures in accessibility testing
  19. Phil Sherry at FrontendNE @nonswearyphil Impairments Temporary and situational

  20. ALT: Temporary and situational impairments – Adventures in accessibility testing

    Cat in a box, demonstrating a vision impairment.
  21. ALT: Temporary and situational impairments – Adventures in accessibility testing

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

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

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

    A cat’s member of staff being eaten alive while trying to work.
  25. Phil Sherry at FrontendNE @nonswearyphil Assistive technology A quick look

    at…
  26. ! Questions @nonswearyphil Adventures in accessibility testing

  27. 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.
  28. ALT: A quick look at assistive technology – Adventures in

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

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

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

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

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

    accessibility testing https://twitter.com/HugoThePinkCat/status/846763206806847489
  34. 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.
  35. ALT: A quick look at assistive technology – Adventures in

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

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

    accessibility testing Poo emoji. Or is it smiling chocolate ice cream? Nah, it’s poo.
  38. Phil Sherry at FrontendNE @nonswearyphil User research A quick word

    about…
  39. ALT: A quick word about user research – Adventures in

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

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

    accessibility testing GOV.UK poster about user research. (github.com/alphagov/govdesign)
  42. Phil Sherry at FrontendNE @nonswearyphil Jack the a11y cat makes

    something more accessible Short story
  43. ALT: Short story: Jack the a11y cat makes something more

    accessible Jack is complaining about the inaccessible state of his desk.
  44. 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.
  45. ALT: Short story: Jack the a11y cat makes something more

    accessible Jack has kicked the keyboard to the floor because fuck you.
  46. Phil Sherry at FrontendNE @nonswearyphil Design and code Easy wins…

  47. 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
  48. Accessibility costs too much, plus we don’t have time. most

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

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

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

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

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

    Where I was previously mobile first… 1. Mobile 2. Desktop
  54. 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
  55. Phil Sherry at FrontendNE @nonswearyphil Design Easy wins…

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

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

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

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

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

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

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

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

    testing A cat giving a high-five.
  64. ALT: Easy wins: design and code – Adventures in accessibility

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

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

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

    testing macOS accessibility preferences option to reduce motion.
  68. Phil Sherry at FrontendNE @nonswearyphil Code Easy wins…

  69. Phil Sherry at FrontendNE @nonswearyphil

  70. Just add alt tags, yeah? most developers Easy wins: design

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

    testing Death glare from a feline HTML enthusiast.
  72. 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=“” /> ❌ ✅
  73. Phil Sherry at FrontendNE @nonswearyphil Forms A word about…

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

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

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

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

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

    testing FrontendNE sign-up form – revised.
  79. Phil Sherry at FrontendNE @nonswearyphil Roles and ARIA A word

    about…
  80. ALT: A word about roles and ARIA – Adventures in

    accessibility testing A cat ponders accessibility matters over breakfast.
  81. 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”>
  82. ALT: A word about roles and ARIA – Adventures in

    accessibility testing Browser showing divs with explicit roles.
  83. 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”>
  84. ALT: A word about roles and ARIA – Adventures in

    accessibility testing Browser showing semantic elements with explicit roles.
  85. 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
  86. A word about roles and ARIA – Adventures in accessibility

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

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

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

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

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

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

    accessibility testing W3C’s guide to Using ARIA (w3c.github.io/using-aria)
  93. Phil Sherry at FrontendNE @nonswearyphil Performance A word about…

  94. ALT: A word about performance – Adventures in accessibility testing

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

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

    Catsplosion. Many cats on the same rug.
  97. ALT: A word about performance – Adventures in accessibility testing

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

    Mog on the Tyne’s cats, available for many concurrent users.
  99. ALT: Intermission – Adventures in accessibility testing An excluded kitteh

    is locked out of an inaccessible kitchen.
  100. Intermission

  101. Phil Sherry at FrontendNE @nonswearyphil Accessibility testing Adventures in… Phil

    Sherry at FrontendNE
  102. Part two

  103. 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
  104. Phil Sherry at FrontendNE @nonswearyphil Browser plugins A very quick

    look at…
  105. ALT: A very quick look at browser plugins – Adventures

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

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

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

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

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

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

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

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

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

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

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

    in accessibility testing Ghostery privacy plugin for Chrome.
  117. Phil Sherry at FrontendNE @nonswearyphil Screen readers A quick look

    at…
  118. A quick look at screen readers – Adventures in accessibility

    testing VoiceOver on macOS VoiceOver on iOS NVDA on Windows
  119. Phil Sherry at FrontendNE @nonswearyphil VoiceOver on macOS Testing with…

  120. ALT: A quick look at screen readers – Adventures in

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

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

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

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

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

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

    accessibility testing Apple’s VoiceOver Getting Started Guide. (apple.com/voiceover/info/guide)
  127. Phil Sherry at FrontendNE @nonswearyphil VoiceOver on iOS Testing with…

  128. ALT: A quick look at screen readers – Adventures in

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

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

    accessibility testing Yahoo’s David Pogue with Joe Danowsky, using iOS VoiceOver
  131. Phil Sherry at FrontendNE @nonswearyphil NVDA on Windows Testing with…

  132. 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
  133. ALT: A quick look at screen readers – Adventures in

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

    accessibility testing Understanding screen reader interaction modes, by Léonie Watson.
  135. Phil Sherry at FrontendNE @nonswearyphil Design patterns A look at

    some…
  136. ALT: A look at some design patterns– Adventures in accessibility

    testing Stealth cat sneaks in when the product owner isn’t looking.
  137. Phil Sherry at FrontendNE @nonswearyphil Heading levels Design patterns

  138. Design patterns: anchor context – Adventures in accessibility testing 1.<p

    class=“h1”>Oh dear</p>
  139. Design patterns: anchor context – Adventures in accessibility testing 1.<p

    class=“h1”>Oh dear</p> 2.<h3 class=“header-h2”>Sigh</h3>
  140. 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>
  141. ALT: Design patterns: heading levels – Adventures in accessibility testing

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

    VoiceOver showing regular heading levels.
  143. ALT: Design patterns: heading levels – Adventures in accessibility testing

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

    VoiceOver showing suggested multiple header level 1 – just say no.
  145. Phil Sherry at FrontendNE @nonswearyphil Anchor context Design patterns

  146. Design patterns: anchor context – Adventures in accessibility testing I

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

    href=“#”> 2. Read more 3.</a>.
  148. ALT: Design patterns: anchor context – Adventures in accessibility testing

    The context-free “read more” link.
  149. ALT: Design patterns: anchor context – Adventures in accessibility testing

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

    A visually hidden cat. (I had to think pretty hard how to include this one.)
  151. 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>.
  152. Design patterns: anchor context – Adventures in accessibility testing 1..visuallyhidden

    { 2. display: none; 3.}
  153. Design patterns: anchor context – Adventures in accessibility testing 1..visuallyhidden

    { 2. left: -8008135em; 3. position: absolute; 4.}
  154. 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.}
  155. ALT: Design patterns: anchor context – Adventures in accessibility testing

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

    VoiceOver showing lots of “read more” links with added context.
  157. 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.}
  158. ALT: Design patterns: anchor context – Adventures in accessibility testing

    GOV.UK’s “Skip to main content” link, with focus.
  159. Phil Sherry at FrontendNE @nonswearyphil GOV.UK page header Design patterns

  160. ALT: Design patterns: page header – Adventures in accessibility testing

    Standard GOV.UK Elements page header – original markup.
  161. 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>
  162. ALT: Design patterns: page header – Adventures in accessibility testing

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

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

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

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

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

    Standard Gov.UK Elements page header – old and revised, VoiceOver on macOS.
  168. 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>
  169. 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.}
  170. ALT: Design patterns: page header – Adventures in accessibility testing

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

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

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

    Standard GOV.UK Elements page header – revised markup, NVDA in Windows.
  174. Phil Sherry at FrontendNE @nonswearyphil GOV.UK check your answers Design

    patterns
  175. Phil Sherry at FrontendNE @nonswearyphil Original GDS version Check your

    answers v1.0
  176. ALT: Design patterns: check your answers – Adventures in accessibility

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

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

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

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

    testing Check your answers in the GOV.UK prototype kit. NVDA on Windows.
  181. 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
  182. Phil Sherry at FrontendNE @nonswearyphil Revised GDS version Check your

    answers v2.0
  183. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Check your answers. New GDS version.
  184. ALT: Design patterns: check your answers – Adventures in accessibility

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

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

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

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

    testing Check your answers. New GDS version. NVDA on Windows.
  189. 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>
  190. Phil Sherry at FrontendNE @nonswearyphil Revised GDS version Check your

    answers v2.1
  191. ALT: Design patterns: check your answers – Adventures in accessibility

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

    testing Check your answers. New GDS version with our data, mobile size.
  193. Phil Sherry at FrontendNE @nonswearyphil My new version Check your

    answers v3.0
  194. 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.
  195. ALT: Design patterns: check your answers – Adventures in accessibility

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

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

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

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

    testing Check your answers v3.1. NVDA reads through the page on Windows.
  200. 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>
  201. ALT: Design patterns: check your answers – Adventures in accessibility

    testing Visually-impaired user with a screen magnifier, during a user research session.
  202. 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.
  203. Phil Sherry at FrontendNE @nonswearyphil Quick takeaways And finally…

  204. Quick takeaways – Adventures in accessibility testing • this is

    for everyone
  205. Quick takeaways – Adventures in accessibility testing • this is

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

    for everyone • think screen reader first, mobile second, desktop third • use sensible, semantic markup
  207. 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
  208. 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
  209. 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
  210. 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
  211. ALT: Quick takeaways – Adventures in accessibility testing Accessibility weekly

    newsletter. (a11yweekly.com)
  212. 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
  213. Phil Sherry at FrontendNE @nonswearyphil One more thing… And finally,

  214. ALT: One more thing… – Adventures in accessibility testing The

    cats at Mog on the Tyne and Westgate Ark await your presence.
  215. ALT: Quick takeaways – Adventures in accessibility testing Pictures of

    the guide dog that I’m sponsoring – Una.
  216. That’s all folks

  217. ALT: Who needs a drink? – Adventures in accessibility testing

    A cat in need of a drinking partner.
  218. Phil Sherry at FrontendNE @nonswearyphil Questions? Are there any…

  219. Website: philsherry.com Twitter: nonswearyphil Instagram: philsherry Get in touch