WordCamp Utrecht Accessibility testing, tools and workflow
•
3 likes•796 views
The document summarizes Rian Rietveld's presentation on accessibility testing, tools, and workflows at WordCamp Utrecht 2018. The presentation covered how to test for accessibility during the design, development, and content phases, not just at the end, including checking for sufficient color contrast, proper heading structure and meaningful link text. It provided recommendations on tools to use during development like the aXe accessibility inspector and best practices like ensuring usability for keyboard-only and screen reader users.
Report
Share
More Related Content
Similar to WordCamp Utrecht Accessibility testing, tools and workflow
Similar to WordCamp Utrecht Accessibility testing, tools and workflow (20)
More from Rian Rietveld
More from Rian Rietveld (12)
Recently uploaded
Recently uploaded (20)
WordCamp Utrecht Accessibility testing, tools and workflow
- 1. WordCamp Utrecht 2018 Accessibility testing, tools and workflows Rian Rietveld
- 2. @rianrietveld Rian Rietveld Senior Accessibility Consultant at Level Level Teacher at the Level Level Academy
- 3. lvl.li/wc030 SLIDES , LINKS AND MORE
- 4. Web accessibility is the degree to which a website is usable by as many people as possible. - Laura Kalbag
- 5. + on as many devices as possible. - Rian Rietveld
- 6. The global standard: WCAG 2.1 AA
- 7. 5 critical points 1 Brand guidelines 2 3rd party plugins 3 Web design 4 Development 5 Content
- 8. Not at the end!
- 9. Design
- 10. Design Colour contrast Meaning of colour The order of things Proximity of controls
- 11. Colour Contrast matters Contrast Contrast matters Contrast matters Contrast matters Contrast matters Contrast matters
- 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. What?
- 17. Look also for: Browser developers tools Add-ons in Sketch
- 19. Not by colour alone
- 20. Don’t give meaning to colour
- 21. 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
- 25. Sim Daltonism
- 26. The order of things
- 29. Keep together what belongs together
- 33. <development>
- 35. Not at the end!
- 38. Does it work with keyboard only
- 43. aXe, available as: aXe browser extension aXe-core npm module aXe CLI
- 47. Dynamic content
- 48. Test with a simple screen reader like: Apple VoiceOver with Safari Narrator with Edge
- 49. Workflow Check the generated DOM: Keyboard test - validate - run aXE Check dynamic content with a screen reader
- 50. Content
- 51. Content Reading level Heading structure Meaningful link text
- 52. Reading level = 12 yrs old
- 53. Photo: Lars Plougmann - The art of not getting distracted
- 58. Heading rules One H1 per page Are the other headings meaningful Do not skip a heading level
- 66. Recap
- 67. 5 critical points 1 Brand guidelines 2 3rd party plugins 3 Web design 4 Development 5 Content
- 68. Not at the end!
- 70. One more thing…
- 71. 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!