Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Tales of Accessibility Failures
Search
Eva Ferreira
October 12, 2022
Programming
0
32
Tales of Accessibility Failures
Eva Ferreira
October 12, 2022
Tweet
Share
More Decks by Eva Ferreira
See All by Eva Ferreira
Bulletproof your Design System
evaferreira
0
72
Tales of Accessibility Failures
evaferreira
0
140
La accesibilidad de todos los días - HackAcademy
evaferreira
0
110
Rescue the Dead Horse
evaferreira
0
120
De 45 a 85
evaferreira
0
84
Oda a la década++
evaferreira
1
97
Take on me
evaferreira
3
530
Video edition with CSS & JavaScript
evaferreira
1
220
Take on me - NationJS
evaferreira
1
190
Other Decks in Programming
See All in Programming
VS Code をプロダクトにどう取り込むか
onomax
1
360
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
코틀린으로 멀티플랫폼 만들기
pangmoo
0
150
Git Lint
bkuhlmann
4
750
Milestoner
bkuhlmann
1
410
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
180
Code Reviews
bkuhlmann
4
890
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
960
ゆるい個人開発のススメ
kuroppe1819
10
990
使ってみよう Azure AI Document Intelligence
kosmosebi
2
300
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
237
11k
Teambox: Starting and Learning
jrom
128
8.4k
The Cult of Friendly URLs
andyhume
74
5.7k
Visualization
eitanlees
136
14k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
A better future with KSS
kneath
231
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Fireside Chat
paigeccino
21
2.6k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Happy Clients
brianwarren
92
6.4k
Transcript
Tales of Accessibility Failures Eva Ferreira – SmashingConf, 2022
Hi, I’m Eva! Front-end Engineer at mabl Google Developer Expert
& CSSConf Argentina organizer @evaferreira92
Not another “This is how you do a11y” talk Good
intentions gone bad. @evaferreira92
@evaferreira92 YOU DON’T HAVE TO LEARN FROM YOUR MISTAKES IF
YOU CAN LEARN FROM MINE
⚠️WARNING⚠️ This is a work in progress. I will, most
definitely, keep on messing up. @evaferreira92
Lesson 1
A11y personas Understanding disabilities and assistive technologies
What is a disability? “Accessibility is for blind people”
Disability: A failed interaction between the environment and a person
with a medical condition.
Diverse group of people, a wide range of needs. @evaferreira92
15% of world’s population. has a permanent disability.
None
None
Assistive Technologies * Also known as AT
Hearing Hearing aids Captions
Visual Preference of keyboard over mouse
Screen readers • JAWS • NVDA • Narrator • VoiceOver
• Orca
Mobility Preference of keyboard over mouse
Mobility Sip-and-puff Eye tracking
Mobility Sip-and-puff Eye tracking 💸
Mobility Switches
None
Lesson 2
Simplest things tend to have the biggest impact. I went
ALL IN into aria and screen readers
I wrongly prioritized screen readers over keyboard navigation Begin your
a11y journey with simple and impactful changes. @evaferreira92
Simple, impactful • Color contrast • Semantics • Keyboard navigation
Outlines 💅 Skip navigation links @evaferreira92
Outlines
None
@evaferreira92
But they are ugly! Yes, they are!
https://www.sarasoueidan.com Use outlines on your focusable elements
https://mabl.com
Skip navigation links
https://www.sarasoueidan.com
None
Skip navigation links
None
Lots impact, Low code.
Sometimes simple is not that simple “Code debt just called;
it wants your happiness back.” @evaferreira92
Prioritize Impact and easy to solve @evaferreira92
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
Lesson 3
People mean well … Most of the time.
Aria-label all the things! The Infobae & the React Testing
Library stories @evaferreira92
@evaferreira92
@evaferreira92
@evaferreira92
@evaferreira92
Why?
@evaferreira92 https://webaim.org/blog/aria-cause-solution
“Every image should have an alt text!” @evaferreira92
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
https://www.w3.org/WAI/tutorials/images/decision-tree
The SEO in the room And the story of how
every image had the same alt text. @evaferreira92
Lesson 4
Testing correctly Having 98/100 on Lighthouse won’t save you.
None
None
Manual tests @evaferreira92
Manual tests • Axe Developer tools • WAVE • Keyboard
navigation • Screen readers @evaferreira92
What do we test? We test users’ stories. @evaferreira92
Can a user with [assistive technology] do [action]? @evaferreira92
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
Test for people. @evaferreira92
Automated tests WCAG
None
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
Of course, always aim for no errors. @evaferreira92
How many websites do you think pass with no errors?
5%? 20%? 40%?
3.2% WebAIM Million, 2022 https://webaim.org/projects/million
Automated tools • Axe-core by Deque • Lighthouse • Mabl
• Storybook add-on @evaferreira92
Automated tools • Add these to your pipelines • CI/CD
should fail when requirements are not met. @evaferreira92
Lesson 5
The community & A11y ownership Team effort and gate-keeping
None
None
You cannot out-code bad design. Accessibility is a team effort.
No gate-keeping allowed. @evaferreira92
So, You made a mistake. What happens when you mess
up.
You try again! * Easier said than done @evaferreira92
None
Mistakes are: • Temporal • Localized • Changeable @evaferreira92
You don’t need to be always right. Aim for making
new mistakes instead of repeating old ones. @evaferreira92
You need to try, you need to care. @evaferreira92
Thanks! @evaferreira92