Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessibility testing tools and workflow

941 views

Published on

Blog post with all the text and resources: https://humanmade.com/accessibility-testing/

With sincere apologies to Laura Kalbag for misspeling her name in the slides.

Published in: Internet
  • Be the first to comment

Accessibility testing tools and workflow

  1. 1. Rian Rietveld Accessibility testing tools and workflow
  2. 2. Content of this talk humanmade.com/accessibility-testing
  3. 3. Web accessibility is the degree to which a website is usable by as many people as possible — Laura Kalberg
  4. 4. The global standard: WCAG 2 AA
  5. 5. 5 Critical points 1. Brand guidelines 2. 3rd party plugins 3. Web design 4. Development 5. Content
  6. 6. Not at the end!
  7. 7. Design • Colour contrast • Meaning of colour • The order of things • Proximity of controls
  8. 8. Colour contrast Contrast matters Contrast matters Contrast matters Contrast matters
  9. 9. Colour contrast Colour contrast ratio between text and background must be 4.5 or more for normal text and 
 3.1 or more for text of at least 24 pixels or 19 pixels bold.
  10. 10. What?
  11. 11. Chrome Canary Dev Tools
  12. 12. Not by colour alone
  13. 13. Don’t give meaning to colour
  14. 14. Spot the link I'm gonna make you an offer you can't refuse I'm gonna make you an offer you can't refuse
  15. 15. Sim Daltonism
  16. 16. The order of things
  17. 17. Proximity of controls
  18. 18. Keep together what belongs together
  19. 19. <development>
  20. 20. Test during development!
  21. 21. Not at the end!
  22. 22. Development • Keyboard test • Validate • Run aXe • Screen reader
  23. 23. Does it work with keyboard only
  24. 24. Does it validate? validator.w3.org
  25. 25. aXe, available as: • aXe browser extension • aXe-core npm module • aXe CLI
  26. 26. Dynamic content
  27. 27. Test with a screen reader like: • Apple VoiceOver • NVDA
  28. 28. Automated testing What is the best workflow during theme development?
  29. 29. ¯_(ツ)_/¯
  30. 30. Workflow now Check the generated DOM:
 keyboard test - validate check - aXe in the browser Check dynamic content 
 with a screen reader
  31. 31. To research: BeHat - WordHat for keyboard testing
  32. 32. Content
  33. 33. Content • Reading level • Heading structure • Meaningful link text
  34. 34. Reading level = 12 yrs old
  35. 35. Photo: Lars Plougmann The art of not getting distracted
  36. 36. Reading level testing
  37. 37. Heading structure
  38. 38. Heading rules • One H1 per page • Are the other headings meaningful • Do not skip a heading level

  39. 39. Meaningful link text
  40. 40. Accessibility is not a courtesy to a few visitors. But an essential component of the quality of your website.
  41. 41. The future is accessible!
  42. 42. @rianrietveld humanmade.com/accessible-testing

×