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
Leave No One Behind
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Stephen Thomas
October 22, 2016
Technology
130
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Leave No One Behind
Building Accessible Web Applications
Stephen Thomas
October 22, 2016
More Decks by Stephen Thomas
See All by Stephen Thomas
Sepsis
sathomas
0
110
Introducing D3.js
sathomas
0
2.5k
Building JavaScript Visualizations Part 1
sathomas
1
2.7k
Building JavaScript Visualizations Part 2
sathomas
0
2.6k
Unit Testing JavaScript Applications
sathomas
5
3k
Securing JavaScript Web Applications
sathomas
4
430
Web-Based Visualizations with D3.js
sathomas
8
850
Custom Domains with Github Pages
sathomas
2
320
Other Decks in Technology
See All in Technology
インフラと開発の垣根を超えていき!〜元AWSインフラエンジニアがAWS開発で奮闘している話〜
hatahata021
3
390
Amazon Quick 入門!
ysuzuki
2
130
仕様駆動開発、導入半年。「本当に速くなってるの?」にデータで答える / AICon2026_hirakawa
rakus_dev
0
310
アップデートで何が変わった?デモで学んで使いこなすIBM Bob2.0
muehara
0
220
事業成長とAI活用を止めないデータ基盤アーキテクチャの設計思想
hiracky16
0
370
OPENLOGI Company Profile for engineer
hr01
1
74k
どこまでAIに任せるか 〜確率論と決定論の境界決定〜
shukob
0
430
インシデント事例と パッケージの全量解析に学ぶ ソフトウェアサプライチェーンの守り方 / supply-chain-attack-defense
flatt_security
0
870
AmplifyHostingConstructからSSRフレームワークのためのホスティング設計を考察する/amplify-hosting-construct
fossamagna
1
290
AIツールを導入しても生産性はあがらない? カオナビが直面した 3つの壁と乗り越え方。/ Overcoming 3 Barriers to AI-Driven Productivity at kaonavi
kaonavi
0
140
全員がリーダーである世界へ キリマンジャロ登頂とシェアド・リーダー
jinwatanabe
0
120
10年目を迎えた「ABEMA」がどのように AI 活用を推進して、AI 駆動開発にシフトしているのか / How ABEMA, entering its 10th year, is promoting the use of AI and shifting toward AI-driven development
miyukki
0
360
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
528
40k
BBQ
matthewcrist
89
10k
Leo the Paperboy
mayatellez
8
1.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
408
67k
Paper Plane
katiecoart
PRO
2
52k
Embracing the Ebb and Flow
colly
88
5.1k
Visualization
eitanlees
152
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.5k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
420
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.9k
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.5k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
190
Transcript
Leave No One Behind Building Accessible Web Applications
Why? • More Users • The Law • It’s the
Right Thing to Do
Who? • Users with cognitive impairments • Users with hearing
impairments • Users with visual impairments • Seizures • Color Blindness • Presbyopia • Users with motor impairments
Let’s Look at Some Code
Leave No One Behind • Users with Cognitive Impairments •
Check Reading Level for Content • Don’t Build Complicated Interfaces
Leave No One Behind • Users with Hearing Impairments •
Add visual cues to critical audio notifications • Add close caption tracks to <video> elements
Leave No One Behind • Users with Visual Impairments •
Give Users a way to Disable Animations • Don’t Rely Solely on Color • Watch Contrast Ratio • Responsive Design • Use HTML5 Elements for Page Layout • Correct Use of Buttons and Links
Leave No One Behind • Users with Motor Impairments •
Support Focus Styling • Manage Focus • Dynamically set TabIndex attributes, or • Capture keydown events
Some Key Resources • Checklist • http://webaim.org/standards/wcag/checklist • Tools •
http://khan.github.io/tota11y/ • http://howlowck.github.io/Akbar/ • Learn More • https://www.udacity.com/course/web-accessibility--ud891