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

9f4dcab6a0fc5889de79521bf35e49c4?s=128

Frontend NE

May 04, 2017
Tweet

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