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
64
Tales of Accessibility Failures
Eva Ferreira
October 12, 2022
Tweet
Share
More Decks by Eva Ferreira
See All by Eva Ferreira
Cryptography for lovers 💖
evaferreira
0
17
Bulletproof your Design system
evaferreira
0
40
Good intentions gone bad
evaferreira
0
260
Bulletproof your Design System
evaferreira
0
140
Tales of Accessibility Failures
evaferreira
0
220
La accesibilidad de todos los días - HackAcademy
evaferreira
0
140
Rescue the Dead Horse
evaferreira
0
140
De 45 a 85
evaferreira
0
100
Oda a la década++
evaferreira
1
140
Other Decks in Programming
See All in Programming
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
520
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
930
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
490
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
株式会社 Sun terras カンパニーデック
sunterras
0
230
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
240
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
230
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1k
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
490
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
Featured
See All Featured
Designing for Performance
lara
610
69k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Code Review Best Practice
trishagee
72
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
KATA
mclloyd
32
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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