Understanding Accessibility: WCAG’s 13 Guidelines

Slide 1

Slide 1 text

UNDERSTANDING ACCESSIBILITY: WCAG’s 13 GUIDELINES @_kaseybon

Slide 2

Slide 2 text

Hi! I’m Kasey. kaseybon.com

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

I’m also a Certiﬁed Professional in Web Accessibility (CPWA) accessibilityassociation.org

Slide 5

Slide 5 text

How do I know if my website is accessible?

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

www.w3.org/TR/WCAG21/

Slide 9

Slide 9 text

The Structure

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Levels of Conformance A AA AAA

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

The Guidelines

Slide 21

Slide 21 text

PERCEIVABLE People must be able to ﬁnd your content. 1

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Text Alternatives PERCEIVABLE 1.1

Slide 24

Slide 24 text

Text Alternatives PERCEIVABLE 1.1

Slide 25

Slide 25 text

Text Alternatives PERCEIVABLE 1.1

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

PERCEIVABLE 1.2 YouTube: IMSTVUK Time-Based Media

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

PERCEIVABLE 1.3 Adaptable Twitter: @kevinrj

Slide 38

Slide 38 text

PERCEIVABLE 1.4 Distinguishable Content can be separated from its background.

Slide 39

Slide 39 text

PERCEIVABLE 1.4 Distinguishable contrast-ratio.com

Slide 40

Slide 40 text

PERCEIVABLE 1.4 Distinguishable contrast-ratio.com

Slide 41

Slide 41 text

PERCEIVABLE 1.4 Distinguishable contrast-ratio.com

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

OPERABLE People must be able to use your website. 2

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Keyboard Accessible OPERABLE 2.1 CodePen: Nick Lemmon

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Enough Time OPERABLE 2.2 YouTube: Simon’s Cat

Slide 49

Slide 49 text

Enough Time OPERABLE 2.2 CodePen: Rakesh Kumar

Slide 50

Slide 50 text

Enough Time OPERABLE 2.2 Image: eventbrite

Slide 51

Slide 51 text

Enough Time OPERABLE 2.2 Image: CodeProject

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Navigable OPERABLE 2.4 webaim.org/techniques/keyboard

Slide 57

Slide 57 text

Navigable OPERABLE 2.4 webaim.org/techniques/keyboard

Slide 58

Slide 58 text

Navigable OPERABLE 2.4 webaim.org/techniques/keyboard

Slide 59

Slide 59 text

Navigable OPERABLE 2.4 webaim.org/techniques/keyboard

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Mouse Input Modalities OPERABLE 2.5

Slide 62

Slide 62 text

Input Modalities OPERABLE 2.5 Mouse Touch Screen

Slide 63

Slide 63 text

Input Modalities OPERABLE 2.5 Mouse Touch Screen Speech to Text

Slide 64

Slide 64 text

Input Modalities OPERABLE 2.5 dcmp.org

Slide 65

Slide 65 text

UNDERSTANDABLE People must be able to understand your website. 3

Slide 66

Slide 66 text

Readable Content is readable and easy to understand. UNDERSTANDABLE 3.1

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

Readable UNDERSTANDABLE 3.1

Slide 69

Slide 69 text

Readable UNDERSTANDABLE 3.1

Slide 70

Slide 70 text

Readable UNDERSTANDABLE 3.1 CodePen: kaseybon

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

Input Assistance UNDERSTANDABLE 3.3 Example: W3C

Slide 78

Slide 78 text

Input Assistance UNDERSTANDABLE 3.3 Example: W3C

Slide 79

Slide 79 text

ROBUST Your website must work with different technologies. 4

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

Compatible ROBUST 4.1 Write valid, semantic HTML.

Slide 82

Slide 82 text

Compatible ROBUST 4.1 Use ARIA to extend HTML.

Slide 83

Slide 83 text

Compatible ROBUST 4.1 Incorporate accessibility testing into your build process.