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
   

   View Slide

2. Hi! I’m Kasey.
   
   kaseybon.com
   

   View Slide

3. I’m a Technical Director at Sparkbox.
   
   seesparkbox.com
   

   View Slide

4. I’m also a Certified Professional in Web Accessibility (CPWA)
   accessibilityassociation.org
   
   

   View Slide

5. How do I know if my website is
   accessible?
   

   View Slide

6. Web Content Accessibility Guidelines
   www.w3.org/WAI/standards-guidelines/wcag/
   

   View Slide

7. WCAG 2.1
   www.w3.org/WAI/standards-guidelines/wcag/
   

   View Slide

8. www.w3.org/TR/WCAG21/
   

   View Slide

9. The Structure
   

   View Slide

10. 1. Perceivable
    4 Principles
    WCAG 2.1
    2. Operable
    3. Understandable
    4. Robust
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

14. Levels of Conformance
    A
    AA
    AAA
    

    View Slide

15. Levels of Conformance
    A
    AA
    AAA
    The bare minimum level of accessibility.
    

    View Slide

16. Levels of Conformance
    A
    AA
    AAA
    The bare minimum level of accessibility.
    Everything in level A plus a few additional requirements.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

19. www.w3.org/WAI/WCAG21/quickref/#time-based-media
    

    View Slide

20. The Guidelines
    

    View Slide

21. PERCEIVABLE
    People must be able to find your content.
    1
    

    View Slide

22. Text Alternatives
    All non-text content has a text alternative.
    PERCEIVABLE 1.1
    

    View Slide

23. Text Alternatives
    PERCEIVABLE 1.1
    

    View Slide

24. Text Alternatives
    PERCEIVABLE 1.1
    

    View Slide

25. Text Alternatives
    PERCEIVABLE 1.1
    

    View Slide

26. PERCEIVABLE 1.2
    Time-Based Media
    There are alternative options for time-based media.
    

    View Slide

27. YouTube: Convos With My 2-Year-Old
    PERCEIVABLE 1.2
    Time-Based Media
    

    View Slide

28. PERCEIVABLE 1.2
    Time-Based Media
    YouTube: Walt Disney Animation Studios
    

    View Slide

29. PERCEIVABLE 1.2
    YouTube: IMSTVUK
    Time-Based Media
    

    View Slide

30. PERCEIVABLE 1.2
    www.thisamericanlife.org/644/random-acts-of-history
    Time-Based Media
    

    View Slide

31. PERCEIVABLE 1.2
    Time-Based Media
    www.thisamericanlife.org/644/random-acts-of-history
    

    View Slide

32. PERCEIVABLE 1.2
    www.thisamericanlife.org/644/transcript
    Time-Based Media
    

    View Slide

33. PERCEIVABLE 1.3
    Adaptable
    Content can be presented in different ways without losing context.
    

    View Slide

34. PERCEIVABLE 1.3
    Adaptable
    thewirecutter.com/reviews/best-automatic-feeder-for-cats-and-small-dogs/
    

    View Slide

35. PERCEIVABLE 1.3
    Adaptable
    thewirecutter.com/reviews/best-automatic-feeder-for-cats-and-small-dogs/
    

    View Slide

36. PERCEIVABLE 1.3
    Adaptable
    thewirecutter.com/reviews/best-automatic-feeder-for-cats-and-small-dogs/
    

    View Slide

37. PERCEIVABLE 1.3
    Adaptable
    Twitter: @kevinrj
    

    View Slide

38. PERCEIVABLE 1.4
    Distinguishable
    Content can be separated from its background.
    

    View Slide

39. PERCEIVABLE 1.4
    Distinguishable
    contrast-ratio.com
    

    View Slide

40. PERCEIVABLE 1.4
    Distinguishable
    contrast-ratio.com
    

    View Slide

41. PERCEIVABLE 1.4
    Distinguishable
    contrast-ratio.com
    

    View Slide

42. PERCEIVABLE 1.4
    Distinguishable
    Background audio should be 20 decibels quieter
    than speaking voices.
    

    View Slide

43. OPERABLE
    People must be able to use your website.
    2
    

    View Slide

44. Keyboard Accessible
    All parts of a website can be accessed using only keyboard.
    OPERABLE 2.1
    

    View Slide

45. Keyboard Accessible
    OPERABLE 2.1
    CodePen: Nick Lemmon
    

    View Slide

46. Keyboard Accessible
    OPERABLE 2.1
    Use links for links and buttons for buttons.
    

    View Slide

47. Enough Time
    People are given enough time to use the content on your website.
    OPERABLE 2.2
    

    View Slide

48. Enough Time
    OPERABLE 2.2
    YouTube: Simon’s Cat
    

    View Slide

49. Enough Time
    OPERABLE 2.2
    CodePen: Rakesh Kumar
    

    View Slide

50. Enough Time
    OPERABLE 2.2
    Image: eventbrite
    

    View Slide

51. Enough Time
    OPERABLE 2.2
    Image: CodeProject
    

    View Slide

52. Seizures and Physical Reactions
    Website content is not designed in a way that will cause seizures.
    OPERABLE 2.3
    

    View Slide

53. Seizures and Physical Reactions
    OPERABLE 2.3
    Animations and videos do not flash more than 3
    times per second.
    

    View Slide

54. Seizures and Physical Reactions
    OPERABLE 2.3
    Image: metro.co.uk
    

    View Slide

55. Navigable
    People can navigate the website and understand where they are.
    OPERABLE 2.4
    

    View Slide

56. Navigable
    OPERABLE 2.4
    webaim.org/techniques/keyboard
    

    View Slide

57. Navigable
    OPERABLE 2.4
    webaim.org/techniques/keyboard
    

    View Slide

58. Navigable
    OPERABLE 2.4
    webaim.org/techniques/keyboard
    

    View Slide

59. Navigable
    OPERABLE 2.4
    webaim.org/techniques/keyboard
    

    View Slide

60. Input Modalities
    All parts of a website can be accessed using other input devices besides a
    keyboard.
    OPERABLE 2.5
    

    View Slide

61. Mouse
    Input Modalities
    OPERABLE 2.5
    

    View Slide

62. Input Modalities
    OPERABLE 2.5
    Mouse
    Touch Screen
    

    View Slide

63. Input Modalities
    OPERABLE 2.5
    Mouse
    Touch Screen
    Speech to Text
    

    View Slide

64. Input Modalities
    OPERABLE 2.5
    dcmp.org
    

    View Slide

65. UNDERSTANDABLE
    People must be able to understand your website.
    3
    

    View Slide

66. Readable
    Content is readable and easy to understand.
    UNDERSTANDABLE 3.1
    

    View Slide

67. Use simple language and avoid jargon when
    possible.
    Readable
    UNDERSTANDABLE 3.1
    

    View Slide

68. Readable
    UNDERSTANDABLE 3.1
    

    View Slide

69. Readable
    UNDERSTANDABLE 3.1
    

    View Slide

70. Readable
    UNDERSTANDABLE 3.1
    CodePen: kaseybon
    

    View Slide

71. Predictable
    Web pages are predictable in how they appear and operate.
    UNDERSTANDABLE 3.2
    

    View Slide

72. Predictable
    UNDERSTANDABLE 3.2
    smashingmagazine.com/2019/01/web-standards-guide
    

    View Slide

73. Predictable
    UNDERSTANDABLE 3.2
    smashingmagazine.com/2019/01/web-standards-guide
    

    View Slide

74. Predictable
    UNDERSTANDABLE 3.2
    smashingmagazine.com/2019/01/web-standards-guide
    

    View Slide

75. Predictable
    UNDERSTANDABLE 3.2
    smashingmagazine.com/2019/01/web-standards-guide
    

    View Slide

76. Input Assistance
    It’s easy for people to correct and avoid mistakes.
    UNDERSTANDABLE 3.3
    

    View Slide

77. Input Assistance
    UNDERSTANDABLE 3.3
    Example: W3C
    

    View Slide

78. Input Assistance
    UNDERSTANDABLE 3.3
    Example: W3C
    

    View Slide

79. ROBUST
    Your website must work with different technologies.
    4
    

    View Slide

80. Compatible
    Build websites that work with current and future assistive technology.
    ROBUST 4.1
    

    View Slide

81. Compatible
    ROBUST 4.1
    Write valid, semantic HTML.
    

    View Slide

82. Compatible
    ROBUST 4.1
    Use ARIA to extend HTML.
    

    View Slide

83. Compatible
    ROBUST 4.1
    Incorporate accessibility testing into your
    build process.
    

    View Slide

84. View Slide

85. accessibilityassociation.org/wascertification
    

    View Slide

86. a11ycalendar.kaseybon.com
    

    View Slide

87. a11ycalendar.kaseybon.com
    

    View Slide

88. THANK YOU!
    

    View Slide