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.

WordCamp Utrecht Accessibility testing, tools and workflow

68 views

Published on

Talk for WordCamp Utrecht 2018

Published in: Internet
  • Be the first to comment

WordCamp Utrecht Accessibility testing, tools and workflow

  1. 1. WordCamp Utrecht 2018 Accessibility testing, tools and workflows Rian Rietveld
  2. 2. @rianrietveld Rian Rietveld Senior Accessibility Consultant 
 at Level Level Teacher at the Level Level Academy
  3. 3. lvl.li/wc030 SLIDES , LINKS AND MORE
  4. 4. Web accessibility is the degree to which a website is usable by as many people as possible. - Laura Kalbag
  5. 5. + on as many devices as possible. - Rian Rietveld
  6. 6. The global standard: WCAG 2.1 AA
  7. 7. 5 critical points 1 Brand guidelines 2 3rd party plugins 3 Web design 4 Development 5 Content
  8. 8. Not at the end!
  9. 9. Design
  10. 10. Design Colour contrast Meaning of colour The order of things Proximity of controls
  11. 11. Colour Contrast matters Contrast Contrast matters Contrast matters Contrast matters Contrast matters Contrast matters
  12. 12. 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. COLOUR CONTRAST
  13. 13. What?
  14. 14. Look also for: Browser developers tools Add-ons in Sketch
  15. 15. Not by colour alone
  16. 16. Don’t give meaning to colour
  17. 17. 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
  18. 18. Sim Daltonism
  19. 19. The order of things
  20. 20. Proximity of controls
  21. 21. Keep together what belongs together
  22. 22. <development>
  23. 23. Test during development!
  24. 24. Not at the end!
  25. 25. Development Keyboard test Validate Run aXe Screen reader
  26. 26. Does it work with keyboard only
  27. 27. rianrietveld.com/keyboard
  28. 28. validator.w3.org DOES IT VALIDATE?
  29. 29. aXe, available as: aXe browser extension aXe-core npm module aXe CLI
  30. 30. Dynamic content
  31. 31. Test with a simple screen reader like: Apple VoiceOver with Safari Narrator with Edge
  32. 32. Workflow Check the generated DOM: Keyboard test - validate - run aXE Check dynamic content with a screen reader
  33. 33. Content
  34. 34. Content Reading level Heading structure Meaningful link text
  35. 35. Reading level = 12 yrs old
  36. 36. Photo: Lars Plougmann - The art of not getting distracted
  37. 37. Reading level testing
  38. 38. Heading structure
  39. 39. Heading rules One H1 per page Are the other headings meaningful Do not skip a heading level
  40. 40. Meaningful link text
  41. 41. Recap
  42. 42. 5 critical points 1 Brand guidelines 2 3rd party plugins 3 Web design 4 Development 5 Content
  43. 43. Not at the end!
  44. 44. @rianrietveld lvl.li/wc030
  45. 45. One more thing…
  46. 46. Check your goodiebag for the accessibility cards and the Level Level Academy flyer, and enter our free workshop giveaway! lvl.li/academy Join one of our accessibility workshops at the Level Level Academy! or visit:Enter our free workshop giveaway!

×