Understanding Accessibility: WCAG’s 13 Guidelines

Accessibility is critical, but it can be confusing. Kasey Bonafacio will demystify the 13 WCAG guidelines and show examples of each guideline in action, empowering you to improve accessibility in your projects.

Transcript

1. UNDERSTANDING ACCESSIBILITY: WCAG’s 13 GUIDELINES @_kaseybon
2. Hi! I’m Kasey. kaseybon.com
3. I’m a Technical Director at Sparkbox. seesparkbox.com
4. I’m also a Certified Professional in Web Accessibility (CPWA) accessibilityassociation.org
5. How do I know if my website is accessible?
6. Web Content Accessibility Guidelines www.w3.org/WAI/standards-guidelines/wcag/
7. WCAG 2.1 www.w3.org/WAI/standards-guidelines/wcag/
8. www.w3.org/TR/WCAG21/
9. The Structure
10. 1. Perceivable 4 Principles WCAG 2.1 2. Operable 3. Understandable 4. Robust
11. 1.1 Text Alternatives 1.2 Time-Based Media 1.3 Adaptable 1.4 Distinguishable 1. Perceivable 4 Principles WCAG 2.1 2. Operable 3. Understandable 4. Robust 13 Guidelines 2.1 Keyboard Accessible 2.2 Enough Time 2.3 Seizures and Physical Reactions 2.4 Navigable 2.5 Input Modalities 3.1 Readable 3.2 Predictable 3.3 Input Assistance 4.1 Compatible
12. 1.1 Text Alternatives 1.2 Time-Based Media 1.3 Adaptable 1.4 Distinguishable 1. Perceivable 4 Principles WCAG 2.1 2. Operable 3. Understandable 4. Robust 13 Guidelines 2.1 Keyboard Accessible 2.2 Enough Time 2.3 Seizures and Physical Reactions 2.4 Navigable 2.5 Input Modalities 3.1 Readable 3.2 Predictable 3.3 Input Assistance 4.1 Compatible 78 Success Criteria Just trust me here, there are 78 of them.
13. 1.1 Text Alternatives 1.2 Time-Based Media 1.3 Adaptable 1.4 Distinguishable 1. Perceivable 4 Principles WCAG 2.1 2. Operable 3. Understandable 4. Robust 13 Guidelines 2.1 Keyboard Accessible 2.2 Enough Time 2.3 Seizures and Physical Reactions 2.4 Navigable 2.5 Input Modalities 3.1 Readable 3.2 Predictable 3.3 Input Assistance 4.1 Compatible 78 Success Criteria Just trust me here, there are 78 of them.
14. Levels of Conformance A AA AAA
15. Levels of Conformance A AA AAA The bare minimum level of accessibility.
16. Levels of Conformance A AA AAA The bare minimum level of accessibility. Everything in level A plus a few additional requirements.
17. Levels of Conformance A AA AAA The bare minimum level of accessibility. Everything in level A plus a few additional requirements. Everything in levels A and AA plus a few additional requirements.
18. Levels of Conformance A AA AAA The bare minimum level of accessibility. Everything in level A plus a few additional requirements. Everything in levels A and AA plus a few additional requirements.
19. www.w3.org/WAI/WCAG21/quickref/#time-based-media
20. The Guidelines
21. PERCEIVABLE People must be able to find your content. 1
22. Text Alternatives All non-text content has a text alternative. PERCEIVABLE 1.1
23. Text Alternatives PERCEIVABLE 1.1
24. Text Alternatives PERCEIVABLE 1.1
25. Text Alternatives PERCEIVABLE 1.1
26. PERCEIVABLE 1.2 Time-Based Media There are alternative options for time-based media.
27. YouTube: Convos With My 2-Year-Old PERCEIVABLE 1.2 Time-Based Media
28. PERCEIVABLE 1.2 Time-Based Media YouTube: Walt Disney Animation Studios
29. PERCEIVABLE 1.2 YouTube: IMSTVUK Time-Based Media
30. PERCEIVABLE 1.2 www.thisamericanlife.org/644/random-acts-of-history Time-Based Media
31. PERCEIVABLE 1.2 Time-Based Media www.thisamericanlife.org/644/random-acts-of-history
32. PERCEIVABLE 1.2 www.thisamericanlife.org/644/transcript Time-Based Media
33. PERCEIVABLE 1.3 Adaptable Content can be presented in different ways without losing context.
34. PERCEIVABLE 1.3 Adaptable thewirecutter.com/reviews/best-automatic-feeder-for-cats-and-small-dogs/
35. PERCEIVABLE 1.3 Adaptable thewirecutter.com/reviews/best-automatic-feeder-for-cats-and-small-dogs/
36. PERCEIVABLE 1.3 Adaptable thewirecutter.com/reviews/best-automatic-feeder-for-cats-and-small-dogs/
37. PERCEIVABLE 1.3 Adaptable Twitter: @kevinrj
38. PERCEIVABLE 1.4 Distinguishable Content can be separated from its background.
39. PERCEIVABLE 1.4 Distinguishable contrast-ratio.com
40. PERCEIVABLE 1.4 Distinguishable contrast-ratio.com
41. PERCEIVABLE 1.4 Distinguishable contrast-ratio.com
42. PERCEIVABLE 1.4 Distinguishable Background audio should be 20 decibels quieter than speaking voices.
43. OPERABLE People must be able to use your website. 2
44. Keyboard Accessible All parts of a website can be accessed using only keyboard. OPERABLE 2.1
45. Keyboard Accessible OPERABLE 2.1 CodePen: Nick Lemmon
46. Keyboard Accessible OPERABLE 2.1 Use links for links and buttons for buttons.
47. Enough Time People are given enough time to use the content on your website. OPERABLE 2.2
48. Enough Time OPERABLE 2.2 YouTube: Simon’s Cat
49. Enough Time OPERABLE 2.2 CodePen: Rakesh Kumar
50. Enough Time OPERABLE 2.2 Image: eventbrite
51. Enough Time OPERABLE 2.2 Image: CodeProject
52. Seizures and Physical Reactions Website content is not designed in a way that will cause seizures. OPERABLE 2.3
53. Seizures and Physical Reactions OPERABLE 2.3 Animations and videos do not flash more than 3 times per second.
54. Seizures and Physical Reactions OPERABLE 2.3 Image: metro.co.uk
55. Navigable People can navigate the website and understand where they are. OPERABLE 2.4
56. Navigable OPERABLE 2.4 webaim.org/techniques/keyboard
57. Navigable OPERABLE 2.4 webaim.org/techniques/keyboard
58. Navigable OPERABLE 2.4 webaim.org/techniques/keyboard
59. Navigable OPERABLE 2.4 webaim.org/techniques/keyboard
60. Input Modalities All parts of a website can be accessed using other input devices besides a keyboard. OPERABLE 2.5
61. Mouse Input Modalities OPERABLE 2.5
62. Input Modalities OPERABLE 2.5 Mouse Touch Screen
63. Input Modalities OPERABLE 2.5 Mouse Touch Screen Speech to Text
64. Input Modalities OPERABLE 2.5 dcmp.org
65. UNDERSTANDABLE People must be able to understand your website. 3
66. Readable Content is readable and easy to understand. UNDERSTANDABLE 3.1
67. Use simple language and avoid jargon when possible. Readable UNDERSTANDABLE 3.1
68. Readable UNDERSTANDABLE 3.1
69. Readable UNDERSTANDABLE 3.1
70. Readable UNDERSTANDABLE 3.1 CodePen: kaseybon
71. Predictable Web pages are predictable in how they appear and operate. UNDERSTANDABLE 3.2
72. Predictable UNDERSTANDABLE 3.2 smashingmagazine.com/2019/01/web-standards-guide
73. Predictable UNDERSTANDABLE 3.2 smashingmagazine.com/2019/01/web-standards-guide
74. Predictable UNDERSTANDABLE 3.2 smashingmagazine.com/2019/01/web-standards-guide
75. Predictable UNDERSTANDABLE 3.2 smashingmagazine.com/2019/01/web-standards-guide
76. Input Assistance It’s easy for people to correct and avoid mistakes. UNDERSTANDABLE 3.3
77. Input Assistance UNDERSTANDABLE 3.3 Example: W3C
78. Input Assistance UNDERSTANDABLE 3.3 Example: W3C
79. ROBUST Your website must work with different technologies. 4
80. Compatible Build websites that work with current and future assistive technology. ROBUST 4.1
81. Compatible ROBUST 4.1 Write valid, semantic HTML.
82. Compatible ROBUST 4.1 Use ARIA to extend HTML.
83. Compatible ROBUST 4.1 Incorporate accessibility testing into your build process.
85. accessibilityassociation.org/wascertification
86. a11ycalendar.kaseybon.com
87. a11ycalendar.kaseybon.com
88. THANK YOU!