Making sure your WordPress site is accessible is important for so many critical reasons, but it can be intimidating to sort through the details to determine which standards to try to meet and figure out if you’re meeting them. Delivered to WordCamp Sacramento 2018.

1. Accessibility:
Beginning the
Journey
BEN BYRNE
CORNERSHOP CREATIVE
1

2. What is it?
DEGREE TO WHICH A PRODUCT,
DEVICE, SERVICE, OR
ENVIRONMENT IS AVAILABLE TO
AS MANY PEOPLE AS POSSIBLE.
2

3. accessibility
3
a11y

4. A11y issues are
common
AND NOT NECESSARILY
PERMANENT
4

5. Visual Impairment
5

6. Motor Impairment
6
https://www.flickr.com/photos/silviastorti/13826209535/

7. Auditory
Impairment
7
https://www.flickr.com/photos/martinlabar/2278936071/

8. Cognitive Impairment
8
https://www.flickr.com/photos/leehaywood/5135564665/

9. Humanity
Audience
Search Engines
Finances
WHY CARE?
9

10. Accessibility
Standards
10

11. 11
W3C WCAG 2.0
Section 508
LEVELS A, AA, & AAA

12. WCAG 2.1
•Announced in early June
•Provides 17 additional success criteria
•https://www.w3.org/WAI/standards-
guidelines/wcag/new-in-21/
12

13. The Basics
13

14. Text-Only
• Use ALT, TITLE attributes
• https://webaim.org/techniques/
alttext/
• Keyboard navigability
• Mindful of TABINDEX
• Skip-to-content link
14

15. Document Structure
• Use semantic HTML5:
• <nav> <aside> <main> etc
• Be mindful of H1-H6
• Extend with ARIA roles
15

16. Color & Type
• Contrast ratios
• Font sizes
• Use more than color to denote
differences, emphasis, and content
meaning.
• Use CSS for ALL CAPS
16

17. Content
• Use descriptive titles, headers, and
link text to provide added context
• Click here
• Do not reference things by position
• See sidebar at left
17

18. Media
• No autoplay. Ever.
• Captions on video, audio, and
other non-text content
• No images of text
18

19. Code
• Indicate language
• Don’t have major errors
• Gracefully handle zooming
19

20. WordPress
WORDPRESS.ORG/ABOUT/
ACCESSIBILITY/
20

21. 21

22. 22

23. Specific Plugins
UF HEALTH REQUIRE IMAGE ALT TAGS
WP ACCESSIBILITY
23

24. Test!
24

25. Tools
BROWSER EXTENSIONS
25

26. WAVE
FROM WEBAIM.ORG
26

27. 27

28. Spectrum
28

29. 29

30. WCAG Luminosity
Contrast Ratio Analyzer
30

31. 31

32. Others
LIGHTHOUSE (IN DEVTOOLS)
AXE (FROM DEQUE SYSTEMS)
32

33. Keep In Mind…
33

34. It’s not binary
IT’S A SPECTRUM
34

35. Compliance is not
everything
THE UX IS WHAT MATTERS
35

36. Every Step is Good
AS LONG AS IT’S FORWARD
36

37. THANK YOU
37
Ben Byrne
@drywall
ben@cshp.co