I Can’t See: Low Vision A11y & Users

A presentation at MagnoliaJS in April 2020 in by Chris DeMars

Slide 1

Chris DeMars ● @saltnburnem #FRFrontEnd ● #DeveloperCommunity

Slide 2

Chris DeMars ● @saltnburnem #FRFrontEnd ● #DeveloperCommunity

Slide 3

Slide 4

Slide 5

https://github.com/marcysutton/no-mouse-days

Slide 6

Why? Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 7

I Can’t See Low Vision A11y & Users Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 8

Chris DeMars Front-End Developer @saltnburnem on Twitter! Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 9

Chris DeMars ● @saltnburnem 😢 #DeveloperCommunity

Slide 10

That’s Me! • • • • • • Google Developer Expert Microsoft MVP International Speaker 🌎 Founder of Vuetroit 🔊 Host of Tales From the Script 💚 Tattoos & Horror 👻 🤡 ☠. 🧟. 🧛 Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 11

Twitter: @TalesFTScript | Site: talesftscript.com 8

Slide 12

“I can’t see that.” Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 13

Percentage of people with disabilities. No Disabilities Disabilties 38% 62%

https://www.inclusivecitymaker.com/disabled-people-in-the-world-in-2019-facts-and-figures/ Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 14

A11y Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 15

Numeronym Accessibility A 1 2 3 4 5 6 7 8 9 10 11 y A11y Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 16

What is a11y? Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 17

“Web accessibility means that people with disabilities can use the Web.” https://www.w3.org/WAI/intro/accessibility.php Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 18

Open Web = Inclusive Web = Web for all! Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 19

“Web accessibility means that EVERYONE can use the Web.” - Me (Chris DeMars) Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 20

“The web is not a barrier to people with disabilities, it is the solution..” - http://webaim.org/articles/pour/ Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 21

“Accessibility is NOT a requirement, it is a MUST!” Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 22

Federal Website Accessibility Lawsuits by State in 2017 Number of Lawsuits 400 335 325 300 200 100 0 6 9 AZ CA 58 8 1 7 24 9 10 15 2 1 4 FL GA IL MA NH MI NJ NY OH PA PR TX VA Total Number of Suits Nationwide: At least 814 Chris DeMars | @saltnburnem http://bit.ly/2Ds4EPd

Slide 23

Types of Disabilities 🖐 Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 24

Types of Disabilities 🖐 Hearing Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 25

Types of Disabilities 🖐 Cognitive Hearing Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 26

Types of Disabilities 🖐 Cognitive Mobility Hearing Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 27

Types of Disabilities 🖐 Cognitive Mobility Hearing Chris DeMars ● @saltnburnem Temporary #DeveloperCommunity

Slide 28

Types of Disabilities Vision 🖐 Cognitive Mobility Hearing Chris DeMars ● @saltnburnem Temporary #DeveloperCommunity

Slide 29

POUR Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 30

P O U R Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 31

erceivable P O U R Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 32

erceivable P perable O U R Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 33

erceivable P perable O nderstandable U R Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 34

erceivable P perable O nderstandable U obust R Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 35

erceivable P perable O nderstandable U obust R Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 36

erceivable P Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 37

Poor Vision !== Low Vision Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 38

Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 39

Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 40

Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 41

Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 42

Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 43

Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 44

Color Blindness Or Color Vision Deficiency Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 45

What is it? Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 46

“Color vision deficiency is the inability to distinguish certain shades of color.” - https://www.aoa.org/ Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 47

How many people are color blind? Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 48

1 in 12 🚶 Chris DeMars ● @saltnburnem 🚶🚶🚶 🚶 🚶🚶 🚶🚶🚶 🚶🚶 #DeveloperCommunity

Slide 49

1 in 200 👩 Chris DeMars ● @saltnburnem x 200 #DeveloperCommunity

Slide 50

Men Women Women 6% Men 94% Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 51

Men Women Women 6% The gene is passed down from the mom. Men 94% Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 52

Slide 53

Slide 54

Types of color vision deficiencies? Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 55

Types of color vision deficiencies? Normal Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 56

Deuteranopia Types of color vision deficiencies? Normal Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 57

Deuteranopia Types of color vision deficiencies? Protanopia Normal Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 58

Deuteranopia Types of color vision deficiencies? Protanopia Normal Tritanopia Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 59

Monochromatic Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 60

1 in 33,000! Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 61

Visual Acuity Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

What is it? Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 67

Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 68

Types of visual acuity? Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 69

Spatial Acuity Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 70

2 points in spaaaaaace Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 71

Temporal Acuity Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 72

Distinguish visual elements in time! Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 73

Spectral Acuity Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 74

Spectral Acuity Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 75

Acuity is SCIENCE Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 76

Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 77

Contrast Sensitivity Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 78

What is good color contrast? Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 79

WCAG 2.1 says 4.5:1 Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 80

Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 81

Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 82

Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 83

🎉👍🎉 Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 84

The Problem Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 85

Contrasting Colors Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 86

Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 87

Communication Through Colors Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 88

My Awesome Legend Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 89

Waiting Pushed My Awesome Legend In Progress Denied Passed Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 90

My Awesome Legend Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 91

Waiting Pushed My Awesome Legend In Progress Denied Passed Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 92

Disabling Zoom Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 93

Disabling Zoom Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 94

Disabling Zoom Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 95

Poor Line Height Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 96

Poor Typography Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 97

The Solution Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 98

Choose Readable Typography Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 99

Icons & Symbols Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 100

Enable Zoom by Default Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 101

Tools Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 102

https://github.com/dequelabs/axe-core Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 103

Browser Extensions & Testing Frameworks Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 104

Slide 105

Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 106

Takeaways Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 107

Takeaways Use Colors That Work Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 108

Takeaways Use Colors That Work Run Web Sites Through a Testing/Audit Tool Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 109

Takeaways Use Colors That Work Run Web Sites Through a Testing/Audit Tool Choose Proper Typography Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 110

Takeaways Use Colors That Work Run Web Sites Through a Testing/Audit Tool Choose Proper Typography Use A Plugin For Your Editor For Testing Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 111

Takeaways Use Colors That Work Run Web Sites Through a Testing/Audit Tool Choose Proper Typography Use A Plugin For Your Editor For Testing Leave Zoom Alone! Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 112

“Every Little Bit Of Accessibility You Contribute Is So Appreciated And So Needed.”

Chris DeMars ● @saltnburnem Marcy Sutton #DeveloperCommunity

Slide 113

Resources & Credits https://bit.ly/2BheA2c Chris DeMars ● @saltnburnem #DeveloperCommunity

Slide 114

Thanks! Chris DeMars ● @saltnburnem #DeveloperCommunity