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?

11.
Chrome Canary
Dev Tools

12.
Not by colour alone

13.
Don’t give meaning
to colour

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.
Sim Daltonism

16.
The order of things

17.
Proximity of controls

18.
Keep together
what belongs together

19.
<development>

20.
Test during development!

21.
Not at the end!

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

23.
Does it work with keyboard only

24.
Does it validate?
validator.w3.org

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

26.
Dynamic content

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

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

29.
¯_(ツ)_/¯

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

31.
To research:
BeHat - WordHat for keyboard testing

32.
Content

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

34.
Reading level = 12 yrs old

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

36.
Reading level testing

37.
Heading structure

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

39.
Meaningful link text

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

41.
The future is accessible!

42.
@rianrietveld
humanmade.com/accessible-testing