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
Stephen Thomas
October 22, 2016
Technology
0
97
Leave No One Behind
Building Accessible Web Applications
Stephen Thomas
October 22, 2016
Tweet
Share
More Decks by Stephen Thomas
See All by Stephen Thomas
Sepsis
sathomas
0
69
Introducing D3.js
sathomas
0
2.4k
Building JavaScript Visualizations Part 1
sathomas
1
2.5k
Building JavaScript Visualizations Part 2
sathomas
0
2.4k
Unit Testing JavaScript Applications
sathomas
5
2.8k
Securing JavaScript Web Applications
sathomas
4
380
Web-Based Visualizations with D3.js
sathomas
8
760
Custom Domains with Github Pages
sathomas
2
300
Other Decks in Technology
See All in Technology
Amplify 🩷 Bedrock 〜生成AI入門〜
minorun365
PRO
7
350
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
150
EM完全に理解した と思ったけど、 やっぱり何も分からなかった話 / EM Night Fukuoka #1
hirutas
0
240
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
6
1.1k
実例で紹介するRAG導入時の知見と精度向上の勘所
yamahiro
4
1.3k
require(ESM)とECMAScript仕様
uhyo
4
940
Azureの基本的な権限管理の勉強会
yhana
1
1.9k
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
3
610
JAWS-UG Bedrock Claude Night
yamahiro
3
690
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
450
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
2
590
MapLibreとAmazon Location Service
dayjournal
1
170
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Code Reviewing Like a Champion
maltzj
515
39k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Side Projects
sachag
451
41k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
A Tale of Four Properties
chriscoyier
152
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Fantastic passwords and where to find them - at NoRuKo
philnash
38
2.5k
Faster Mobile Websites
deanohume
300
30k
Facilitating Awesome Meetings
lara
43
5.6k
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