Making A Strong Case For Accessibility

A presentation at Code PaLOUsa ‘22 in August 2022 in Louisville, KY, USA by Todd Libby

Slide 1

Slide 1

Making a Strong Case for Accessibility Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 2

Slide 2

Thank you! Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 3

Slide 3

Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 4

Slide 4

Thank you, attendees! Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 5

Slide 5

Maine Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 6

Slide 6

Todd Libby @toddlibby Arizona 9 August, 2022, Code PaLOUsa

Slide 7

Slide 7

Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 8

Slide 8

Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 9

Slide 9

Portland, Maine 🦞 Phoenix, Arizona 🥵 Accessibility Team Lead @ WebstaurantStore Accessibility Engineer @ Centre for Inclusive Design W3C Invited Expert - Accessibility & WCAG3 23 years of developer, design, & accessibility experience Host of the Front End Nerdery Podcast 9 August, 2022, Code PaLOUsa @toddlibby ➡︎ Todd Libby

Slide 10

Slide 10

Making the Case at Your Organization Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 11

Slide 11

Using Data to Advocate Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 12

Slide 12

WebAIM Million Report • One million homepages https://webaim.org/projects/million/ Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 13

Slide 13

WebAIM Million Report • One million homepages • 50.8+ million accessibility errors https://webaim.org/projects/million/ Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 14

Slide 14

WebAIM Million Report • One million homepages • 50.8+ million accessibility errors • Decreased 1.1% since February 2021 https://webaim.org/projects/million/ Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 15

Slide 15

WebAIM Million Report • 887 to 955 elements per home page Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 16

Slide 16

WebAIM Million Report • 887 to 955 elements per home page • Increased 7.7% since February 2021 Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 17

Slide 17

WebAIM Million Report • 887 to 955 elements per home page • Increased 7.7% since February 2021 • 5.3% of all home page errors had a detected accessibility error Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 18

Slide 18

96.8% had WCAG 2 failures Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 19

Slide 19

What are the failures? Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 20

Slide 20

Low Contrast of Text Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 21

Slide 21

Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 22

Slide 22

1.1:1 color contrast ratio (Contrast ran es from 1:1 to 21:1) @toddlibby g Todd Libby 9 August, 2022, Code PaLOUsa

Slide 23

Slide 23

Relative luminance (L1 + 0.05) / (L2 + 0.05) Fore round contrast on back round color @toddlibby g g Todd Libby 9 August, 2022, Code PaLOUsa

Slide 24

Slide 24

SC 1.4.3 Contrast (Minimum)(Level AA) “The visual presentation of text and images of text has a contrast ratio of at least 4.5 to 1” https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 25

Slide 25

Missing Alternative Text Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 26

Slide 26

Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 27

Slide 27

<img src=“/path/to/img/lobster.png”> 🚫 <img src=“/path/to/img/lobster.png” alt=“”> ✅ <img src=“/path/to/img/lobster.png” alt=“Todd’s lobster roll, hot butter, and blueberry soda.”> ✅ Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 28

Slide 28

Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 29

Slide 29

• Low contrast text • Missing alternative text of images • Empty links • Missing form input labels • Empty buttons • Missing document language Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 30

Slide 30

96.5% of all errors Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 31

Slide 31

Examples of practical digital accessibility “Low-hanging fruit” • Color contrast that exceeds guidelines (>10 to 1 ratio) • Accessible color schemes/combinations • Keyboard/screen reader accessible • Accessible components (accordions, modals, tooltips, etc.) • Performant web apps, PWAs, mobile apps, Web sites Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 32

Slide 32

More Examples of practical digital accessibility • Scrollable interactive content • Alternative text on images where necessary (infographics, charts, graphs) • Accessible when viewing mobile phone screen (glare from sun) • Other situational disabilities • Broken arm • Child on lap Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 33

Slide 33

Disability is just Blind, Deaf, or Paralysis. Right? Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 34

Slide 34

Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 35

Slide 35

Learning / Cognitive ADHD / ADD Fibromyalgia / Arthritis Tremors / Parkinson’s Migraine Headaches / Photophobia Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 36

Slide 36

Excuses Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 37

Slide 37

“The client doesn’t have the budget for it.” Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 38

Slide 38

“We’ll get to it after launch.” Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 39

Slide 39

“Why do we even need to make this thing accessible?” Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 40

Slide 40

“Why do we even need to make this thing accessible?” “There is no time to do this.” Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 41

Slide 41

“Why do we even need to make this thing accessible?” “There is no time to do this.” “We don’t have disabled users.” Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 42

Slide 42

“Why do we even need to make this thing accessible?” “There is no time to do this.” “We don’t have disabled users.” “The people that use our product are not disabled.” Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 43

Slide 43

“It’s a huge waste of time.” Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 44

Slide 44

Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 45

Slide 45

Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 46

Slide 46

Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 47

Slide 47

Buy-In Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 48

Slide 48

Buy-In How do I et buy-in from stakeholders, clients, collea ues? • Support trickles down from C-suite & top level to managers, teams, and individuals. 9 August, 2022, Code PaLOUsa @toddlibby g g Todd Libby

Slide 49

Slide 49

Buy-In How do I et buy-in from stakeholders, clients, collea ues? • Support trickles down from C-suite & top level to managers, teams, and individuals. • Do this from the start. Low maintenance is needed, because of accessible designs and clean code. 9 August, 2022, Code PaLOUsa @toddlibby g g Todd Libby

Slide 50

Slide 50

Buy-In How do I et buy-in from stakeholders, clients, collea ues? • Support trickles down from C-suite & top level to managers, teams, and individuals. • Do this from the start. Low maintenance is needed, because of accessible designs and clean code. • Cite instances from the lawsuits that have been won against major corporations (Domino’s Pizza, Target, Bank of America). 9 August, 2022, Code PaLOUsa @toddlibby g g Todd Libby

Slide 51

Slide 51

Buy-In How do I et buy-in from stakeholders, clients, collea ues? • Support trickles down from C-suite & top level to managers, teams, and individuals. • Do this from the start. Low maintenance is needed, because of accessible designs and clean code. • Cite instances from the lawsuits that have been won against major corporations (Domino’s Pizza, Target, Bank of America). • Live testing with disabled users recorded on video. 9 August, 2022, Code PaLOUsa @toddlibby g g Todd Libby

Slide 52

Slide 52

$8 Trillion Worldwide of disposable income of individuals with disabilities https://www.triplepundit.com/story/2022/investing-disability-inclusion/741416 Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 53

Slide 53

$490 Billion Disposable income of individuals with disabilities in the U.S. https://diverseabilitymagazine.com/2018/09/buying-power-people-disabilities/ Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 54

Slide 54

Advocates Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 55

Slide 55

Organization Advocates Teams or individuals that advocate in your or anization • Having a person throughout each department or a team focused on accessibility as a liaison. 9 August, 2022, Code PaLOUsa @toddlibby g Todd Libby

Slide 56

Slide 56

Organization Advocates Teams or individuals that advocate in your or anization • Having a person throughout each department or a team focused on accessibility as a liaison. • Someone that can answer questions and work with others to practice the guidelines and work with others to make accessible products. 9 August, 2022, Code PaLOUsa @toddlibby g Todd Libby

Slide 57

Slide 57

Organization Advocates Teams or individuals that advocate in your or anization • Having a person throughout each department or a team focused on accessibility as a liaison. • Someone that can answer questions and work with others to practice the guidelines and work with others to make accessible products. • Help set up documentation and tooling, serve as an intermediary between departments. 9 August, 2022, Code PaLOUsa @toddlibby g Todd Libby

Slide 58

Slide 58

Assessment Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 59

Slide 59

Assessment Assess the product and the proficiency within the or anization • Gauging where the product(s) are as far as how inclusive and accessible they are is a key priority. 9 August, 2022, Code PaLOUsa @toddlibby g Todd Libby

Slide 60

Slide 60

Assessment Assess the product and the proficiency within the or anization • Gauging where the product(s) are as far as how inclusive and accessible they are is a key priority. • What is the current state of the product, website, or mobile application? 9 August, 2022, Code PaLOUsa @toddlibby g Todd Libby

Slide 61

Slide 61

Assessment Assess the product and the proficiency within the or anization • Gauging where the product(s) are as far as how inclusive and accessible they are is a key priority. • What is the current state of the product, website, or mobile application? • Getting the general idea of the level of knowledge that teams and people in the company currently have. 9 August, 2022, Code PaLOUsa @toddlibby g Todd Libby

Slide 62

Slide 62

Assessment Assess the product and the proficiency within the or anization • Gauging where the product(s) are as far as how inclusive and accessible they are is a key priority. • What is the current state of the product, website, or mobile application? • Getting the general idea of the level of knowledge that teams and people in the company currently have. • How versed are they in guidelines (WCAG) and practices? 9 August, 2022, Code PaLOUsa @toddlibby g Todd Libby

Slide 63

Slide 63

Assessment Assess the product and the proficiency within the or anization • Gauging where the product(s) are as far as how inclusive and accessible they are is a key priority. • What is the current state of the product, website, or mobile application? • Getting the general idea of the level of knowledge that teams and people in the company currently have. • How versed are they in guidelines (WCAG) and practices? • How much training do you have and will you need? 9 August, 2022, Code PaLOUsa @toddlibby g Todd Libby

Slide 64

Slide 64

Training Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 65

Slide 65

Training Maintainin A Written Record • Of all accessibility training done • It should meet requirements that apply to the organization g Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 66

Slide 66

Training Maintainin A Written Record • Of all accessibility training done • It should meet requirements that apply to the organization • Great way to keep data on all training done in organization g Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 67

Slide 67

Training Maintainin A Written Record • Of all accessibility training done • It should meet requirements that apply to the organization • Great way to keep data on all training done in organization • Record the training and who trained and when it was completed g Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 68

Slide 68

Training Maintainin A Written Record • Of all accessibility training done • It should meet requirements that apply to the organization • Great way to keep data on all training done in organization • Record the training and who trained and when it was completed • If there is no inter-organizational training use orgs that do training. g Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 69

Slide 69

Training Maintainin A Written Record • Of all accessibility training done • It should meet requirements that apply to the organization • Great way to keep data on all training done in organization • Record the training and who trained and when it was completed • If there is no inter-organizational training use orgs that do training. • Deque • TPGi • WebAIM g Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 70

Slide 70

Guidelines Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 71

Slide 71

Guidelines Consistent implementation • Design systems ensure accessibility and inclusivity and the understanding of code better Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 72

Slide 72

Guidelines Consistent implementation • Design systems ensure accessibility and inclusivity and the understanding of code better • Accessible components reduce time to implement Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 73

Slide 73

Guidelines Consistent implementation • Design systems ensure accessibility and inclusivity and the understanding of code better • Accessible components reduce time to implement • Testing procedures implemented so people can do jobs well and e @toddlibby 9 August, 2022, Code PaLOUsa ffi Todd Libby ciently

Slide 74

Slide 74

Guidelines Consistent implementation • Design systems ensure accessibility and inclusivity and the understanding of code better • Accessible components reduce time to implement • Testing procedures implemented so people can do jobs well and e ciently • Document guidelines in a collaborative manner using tools @toddlibby 9 August, 2022, Code PaLOUsa ffi Todd Libby

Slide 75

Slide 75

Standards Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 76

Slide 76

Standards Guidelines from different countries • American Disabilities Act (ADA), the Air Carrier Access Act (ACAA), and the Communications and Video Accessibility Act (CVAA) - United States • Section 508 of the Rehabilitation Act, DOJ issues guidance for website accessibility - (U.S. Government) Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 77

Slide 77

Standards Guidelines from different countries • American Disabilities Act (ADA), the Air Carrier Access Act (ACAA), and the Communications and Video Accessibility Act (CVAA) - United States • Section 508 of the Rehabilitation Act, DOJ issues guidance for website accessibility - (U.S. Government) • Accessible Canada Act (ACA), Accessibilities for Ontario’s with Disabilities Act (AODA) - Canada Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 78

Slide 78

Standards Guidelines from different countries • American Disabilities Act (ADA), the Air Carrier Access Act (ACAA), and the Communications and Video Accessibility Act (CVAA) - United States • Section 508 of the Rehabilitation Act, DOJ issues guidance for website accessibility - (U.S. Government) • Accessible Canada Act (ACA), Accessibilities for Ontario’s with Disabilities Act (AODA) - Canada • Web Accessibility Directive which updated EN 301 549, European Accessibility Act - European Union Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 79

Slide 79

Standards Guidelines from different countries • American Disabilities Act (ADA), the Air Carrier Access Act (ACAA), and the Communications and Video Accessibility Act (CVAA) - United States • Section 508 of the Rehabilitation Act, DOJ issues guidance for website accessibility - (U.S. Government) • Accessible Canada Act (ACA), Accessibilities for Ontario’s with Disabilities Act (AODA) - Canada • Web Accessibility Directive which updated EN 301 549, European Accessibility Act - European Union • Web Content Accessibility Guidelines (WCAG) - Internationally Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 80

Slide 80

Standards Guidelines from different countries • American Disabilities Act (ADA), the Air Carrier Access Act (ACAA), and the Communications and Video Accessibility Act (CVAA) - United States • Section 508 of the Rehabilitation Act, DOJ issues guidance for website accessibility - (U.S. Government) • Accessible Canada Act (ACA), Accessibilities for Ontario’s with Disabilities Act (AODA) - Canada • Web Accessibility Directive which updated EN 301 549, European Accessibility Act - European Union • Web Content Accessibility Guidelines (WCAG) - Internationally • Convention on the Rights of Persons with Disabilities (CPRD) • Article 9 • Article 21 Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 81

Slide 81

Testing Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 82

Slide 82

Use Cases/Testing Hirin disabled people • Test & record cases where disabled users are using the product g Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 83

Slide 83

Use Cases/Testing Hirin disabled people • Test & record cases where disabled users are using the product • Present to C-suite & top level people to colleagues/teams g Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 84

Slide 84

Use Cases/Testing Hirin disabled people • Test & record cases where disabled users are using the product • Present to C-suite & top level people to colleagues/teams • Outsource testing with companies: • Fable g Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 85

Slide 85

Use Cases/Testing Hirin disabled people • Test & record cases where disabled users are using the product • Present to C-suite & top level people to colleagues/teams • Outsource testing with companies: • Fable • Hire disabled people! • Teaching and advocating. They have the lived experiences. g Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 86

Slide 86

Accessibility Overlays Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 87

Slide 87

“We use an accessibility overlay. We’re okay.” Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 88

Slide 88

Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 89

Slide 89

AccessiBe Audioeye Equalweb Facil’iti Usablenet Userway Many, many more! Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 90

Slide 90

Overlays will get you sued. Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 91

Slide 91

<script>(function(){ var s = document.createElement(‘script’), e = ! document.body ? document.querySelector(‘head’) : document.body; s.src = ‘https://acsbapp.com/apps/app/dist/js/app.js’; s.async = true; s.onload = function(){ acsbJS.init({ statementLink : ”, footerHtml : ”, hideMobile : false, hideTrigger : false, language : ‘en’, position : ‘left’, leadColor : ‘#000000’, triggerColor : ‘#000000’, triggerRadius : ‘50%’, triggerPositionX : ‘left’, triggerPositionY : ‘center’, triggerIcon : ‘people’, triggerSize : ‘small’, triggerOffsetX : 3, triggerOffsetY : 3, mobile : { triggerSize : ‘small’, triggerPositionX : ‘left’, triggerPositionY : ‘center’, triggerOffsetX : 3, triggerOffsetY : 3, triggerRadius : ‘50%’ } }); }; e.appendChild(s);}());</script>

Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 92

Slide 92

!== Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 93

Slide 93

So what do we do? Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 94

Slide 94

Maintenance Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 95

Slide 95

Maintenance Accessibility is never done • Automated testing wherever possible with new releases or changes Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 96

Slide 96

Maintenance Accessibility is never done • Automated testing wherever possible with new releases or changes • Screen reader analysis before every release Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 97

Slide 97

Maintenance Accessibility is never done • Automated testing wherever possible with new releases or changes • Screen reader analysis before every release • Annual audits Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 98

Slide 98

Maintenance Accessibility is never done • Automated testing wherever possible with new releases or changes • Screen reader analysis before every release • Annual audits • User testing Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 99

Slide 99

Maintenance Accessibility is never done • Automated testing wherever possible with new releases or changes • Screen reader analysis before every release • Annual audits • User testing • Accessibility is never done! Keep moving forward! Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 100

Slide 100

Maintenance Accessibility is never done • Automated testing wherever possible with new releases or changes • Screen reader analysis before every release • Annual audits • User testing • Accessibility is never done! Keep moving forward! • Like the web, accessibility is always evolving Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 101

Slide 101

Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 102

Slide 102

“…our industry as a whole thinks less and less about accessibility (not that we ever had an A game on the subject), and talks less and less about progressive enhancement, preferring to chase the ephemeral goal posts of overengineered solutions to non-problems.” Jeffrey Zeldman - https://www.zeldman.com/2019/12/01/bluebeanieday2019/ Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 103

Slide 103

Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 104

Slide 104

Design and develop for people not like yourself and keep that in mind when throwing words like “inclusive” and “accessible” around. Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 105

Slide 105

A11y is a right. NOT a privilege. https://cottonbureau.com/products/a11y-is-a-right#/5254640/ Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 106

Slide 106

“The power of the Web is in its universality. Access by everyone regardless of disabilities an essential aspect.” — Sir Tim Berners Lee https://www.w3.org/standards/webdesign/accessibility Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 107

Slide 107

Links https://toddl.dev/slides/ @toddlibby on Twitter LinkedIn - 🦞 Todd Libby Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa

Slide 108

Slide 108

Thank you! Todd Libby @toddlibby 9 August, 2022, Code PaLOUsa