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
Good intentions gone bad
Search
Eva Ferreira
May 23, 2024
Programming
0
240
Good intentions gone bad
JSHeroes 2024
Eva Ferreira
May 23, 2024
Tweet
Share
More Decks by Eva Ferreira
See All by Eva Ferreira
Cryptography for lovers 💖
evaferreira
0
11
Bulletproof your Design system
evaferreira
0
28
Bulletproof your Design System
evaferreira
0
130
Tales of Accessibility Failures
evaferreira
0
53
Tales of Accessibility Failures
evaferreira
0
210
La accesibilidad de todos los días - HackAcademy
evaferreira
0
130
Rescue the Dead Horse
evaferreira
0
130
De 45 a 85
evaferreira
0
96
Oda a la década++
evaferreira
1
130
Other Decks in Programming
See All in Programming
20250708_JAWS_opscdk
takuyay0ne
2
130
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
880
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
0
360
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
220
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
580
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
Goで作る、開発・CI環境
sin392
0
260
Model Pollution
hschwentner
1
160
Featured
See All Featured
How to Ace a Technical Interview
jacobian
278
23k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Code Reviewing Like a Champion
maltzj
524
40k
Code Review Best Practice
trishagee
69
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Producing Creativity
orderedlist
PRO
346
40k
Side Projects
sachag
455
42k
The World Runs on Bad Software
bkeepers
PRO
70
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Transcript
Good Intentions, Gone Bad Eva Ferreira – JS Heroes, 2024
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
5 lessons 1. Accessibility personas 2. Simplest things first 3.
People mean well 4. Test, test, test! 5. Accessibility ownership
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
16% of world’s population. has a permanent disability.
None
None
Assistive Technologies * Also known as AT
The most common assistive technology is…
Keyboard Visual and motor impairments
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
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 1. Big impact, easy to solve 2. Mix with
small impact, easy to solve Ideal for Fridays 3. Big impact, hard to solve 4. Small impact, hard to solve @evaferreira92
Lesson 3
People mean well … Most of the time.
Story time! Story Number 1
Aria-label all the things! The Infobae & the React Testing
Library stories @evaferreira92
@evaferreira92
Code
Non Screen Reader users
Screen Reader users
aria-label overrides values
Screen Reader users
Why?
@evaferreira92 https://webaim.org/blog/aria-cause-solution https://webaim.org/blog/aria-cause-solution
Story time! Story Number 2
“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 • 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
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
How many websites do you think pass with no errors?
5%? 20%? 40%?
4.1% WebAIM Million, 2024 https://webaim.org/projects/million
None
@evaferreira92
“It’s just too hard.” @evaferreira92
@evaferreira92
Lesson 5
A11y ownership Team effort
None
None
You cannot out-code bad design. Accessibility is a team effort.
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
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