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.

1. Rian Rietveld
Accessibility testing
tools and workflow

2. Content of this talk
humanmade.com/accessibility-testing

3. Web accessibility
is the degree to which a
website is usable by
as many people as possible
— Laura Kalberg

4. The global standard:
WCAG 2 AA

5. 5 Critical points
1. Brand guidelines
2. 3rd party plugins
3. Web design
4. Development
5. Content

6. Not at the end!

7. Design
• Colour contrast
• Meaning of colour
• The order of things
• Proximity of controls

8. Colour contrast
Contrast matters
Contrast matters
Contrast matters
Contrast matters

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. What?

15. Chrome Canary
Dev Tools

16. Not by colour alone

17. Don’t give meaning
to colour

18. 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

22. Sim Daltonism

23. The order of things

25. Proximity of controls

26. Keep together
what belongs together

30. <development>

31. Test during development!

32. Not at the end!

33. Development
• Keyboard test
• Validate
• Run aXe
• Screen reader

35. Does it work with keyboard only

36. Does it validate?
validator.w3.org

39. aXe, available as:
• aXe browser extension
• aXe-core npm module
• aXe CLI

43. Dynamic content

44. Test with a screen reader like:
• Apple VoiceOver
• NVDA

45. Automated testing
What is the best workflow during
theme development?

46. ¯_(ツ)_/¯

47. Workflow now
Check the generated DOM:
keyboard test - validate check - aXe in the browser
Check dynamic content
with a screen reader

48. To research:
BeHat - WordHat for keyboard testing

49. Content

50. Content
• Reading level
• Heading structure
• Meaningful link text

51. Reading level = 12 yrs old

52. Photo: Lars Plougmann
The art of not getting distracted

53. Reading level testing

55. Heading structure

57. Heading rules
• One H1 per page
• Are the other headings meaningful
• Do not skip a heading level

59. Meaningful link text

65. Accessibility is not a courtesy to a
few visitors.
But an essential component of the
quality of your website.

66. The future is accessible!

67. @rianrietveld
humanmade.com/accessible-testing