Tales of Accessibility Failures

Slide 1

Slide 1 text

Tales of Accessibility Failures Eva Ferreira – SmashingConf, 2022

Slide 2

Slide 2 text

Hi, I’m Eva! Front-end Engineer at mabl Google Developer Expert & CSSConf Argentina organizer @evaferreira92

Slide 3

Slide 3 text

Not another “This is how you do a11y” talk Good intentions gone bad. @evaferreira92

Slide 4

Slide 4 text

@evaferreira92 YOU DON’T HAVE TO LEARN FROM YOUR MISTAKES IF YOU CAN LEARN FROM MINE

Slide 5

Slide 5 text

⚠️WARNING⚠️ This is a work in progress. I will, most definitely, keep on messing up. @evaferreira92

Slide 6

Slide 6 text

Lesson 1

Slide 7

Slide 7 text

A11y personas Understanding disabilities and assistive technologies

Slide 8

Slide 8 text

What is a disability? “Accessibility is for blind people”

Slide 9

Slide 9 text

Disability: A failed interaction between the environment and a person with a medical condition.

Slide 10

Slide 10 text

Diverse group of people, a wide range of needs. @evaferreira92

Slide 11

Slide 11 text

15% of world’s population. has a permanent disability.

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Assistive Technologies * Also known as AT

Slide 15

Slide 15 text

Hearing Hearing aids Captions

Slide 16

Slide 16 text

Visual Preference of keyboard over mouse

Slide 17

Slide 17 text

Screen readers • JAWS • NVDA • Narrator • VoiceOver • Orca

Slide 18

Slide 18 text

Mobility Preference of keyboard over mouse

Slide 19

Slide 19 text

Mobility Sip-and-puff Eye tracking

Slide 20

Slide 20 text

Mobility Sip-and-puff Eye tracking 💸

Slide 21

Slide 21 text

Mobility Switches

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Lesson 2

Slide 24

Slide 24 text

Simplest things tend to have the biggest impact. I went ALL IN into aria and screen readers

Slide 25

Slide 25 text

I wrongly prioritized screen readers over keyboard navigation Begin your a11y journey with simple and impactful changes. @evaferreira92

Slide 26

Slide 26 text

Simple, impactful • Color contrast • Semantics • Keyboard navigation  Outlines 💅  Skip navigation links @evaferreira92

Slide 27

Slide 27 text

Outlines

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

@evaferreira92

Slide 30

Slide 30 text

But they are ugly! Yes, they are!

Slide 31

Slide 31 text

https://www.sarasoueidan.com Use outlines on your focusable elements

Slide 32

Slide 32 text

https://mabl.com

Slide 33

Slide 33 text

Skip navigation links

Slide 34

Slide 34 text

https://www.sarasoueidan.com

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Skip navigation links

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Lots impact, Low code.

Slide 39

Slide 39 text

Sometimes simple is not that simple “Code debt just called; it wants your happiness back.” @evaferreira92

Slide 40

Slide 40 text

Prioritize Impact and easy to solve @evaferreira92

Slide 41

Slide 41 text

Prioritize • Big impact, easy to solve • Mix with small impact, easy to solve  Ideal for Fridays 💃 • Big impact, hard to solve • Small impact, hard to solve @evaferreira92

Slide 42

Slide 42 text

Lesson 3

Slide 43

Slide 43 text

People mean well … Most of the time.

Slide 44

Slide 44 text

Aria-label all the things! The Infobae & the React Testing Library stories @evaferreira92

Slide 45

Slide 45 text

@evaferreira92

Slide 46

Slide 46 text

@evaferreira92

Slide 47

Slide 47 text

@evaferreira92

Slide 48

Slide 48 text

@evaferreira92

Slide 49

Slide 49 text

Why?

Slide 50

Slide 50 text

@evaferreira92 https://webaim.org/blog/aria-cause-solution

Slide 51

Slide 51 text

“Every image should have an alt text!” @evaferreira92

Slide 52

Slide 52 text

Rules for alternative texts • The alt attribute is compulsory • It can be empty if the image is decorative (alt=“”) • Do not be redundant • If it has an action, describe the action, not the image @evaferreira92

Slide 53

Slide 53 text

https://www.w3.org/WAI/tutorials/images/decision-tree

Slide 54

Slide 54 text

The SEO in the room And the story of how every image had the same alt text. @evaferreira92

Slide 55

Slide 55 text

Lesson 4

Slide 56

Slide 56 text

Testing correctly Having 98/100 on Lighthouse won’t save you.

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Manual tests @evaferreira92

Slide 60

Slide 60 text

Manual tests • Axe Developer tools • WAVE • Keyboard navigation • Screen readers @evaferreira92

Slide 61

Slide 61 text

What do we test? We test users’ stories. @evaferreira92

Slide 62

Slide 62 text

Can a user with [assistive technology] do [action]? @evaferreira92

Slide 63

Slide 63 text

Test users’ stories • Can a user with keyboard navigation - create an account? • Can a user with a screen reader - add a product to the cart? • Can a user watch this video - using captions? @evaferreira92

Slide 64

Slide 64 text

Test for people. @evaferreira92

Slide 65

Slide 65 text

Automated tests WCAG

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

WCAG • Set of rules created by W3C a long time ago. • Standard in the industry • What gives the foundation for a11y laws all around the globe • Different success criteria depending on target audience, target country, type of company, etc. @evaferreira92

Slide 68

Slide 68 text

Of course, always aim for no errors. @evaferreira92

Slide 69

Slide 69 text

How many websites do you think pass with no errors? 5%? 20%? 40%?

Slide 70

Slide 70 text

3.2% WebAIM Million, 2022 https://webaim.org/projects/million

Slide 71

Slide 71 text

Automated tools • Axe-core by Deque • Lighthouse • Mabl • Storybook add-on @evaferreira92

Slide 72

Slide 72 text

Automated tools • Add these to your pipelines • CI/CD should fail when requirements are not met. @evaferreira92

Slide 73

Slide 73 text

Lesson 5

Slide 74

Slide 74 text

The community & A11y ownership Team effort and gate-keeping

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

You cannot out-code bad design. Accessibility is a team effort.

Slide 78

Slide 78 text

No gate-keeping allowed. @evaferreira92

Slide 79

Slide 79 text

So, You made a mistake. What happens when you mess up.

Slide 80

Slide 80 text

You try again! * Easier said than done @evaferreira92

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

Mistakes are: • Temporal • Localized • Changeable @evaferreira92

Slide 83

Slide 83 text

You don’t need to be always right. Aim for making new mistakes instead of repeating old ones. @evaferreira92