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
Accessibility Through Progressive Enhancement
Search
Mat Marquis
October 13, 2011
Technology
3
320
Accessibility Through Progressive Enhancement
Mat Marquis
October 13, 2011
Tweet
Share
More Decks by Mat Marquis
See All by Mat Marquis
Responsible Responsive Images
wilto
12
1.3k
Other Decks in Technology
See All in Technology
頻繁リリース × 高品質 = 無理ゲー? いや、できます!/20250306 Shoki Hyo
shift_evolve
0
160
KCD Brazil '25: Enabling Developers with Dapr & Backstage
salaboy
1
130
Go の analysis パッケージで自作するリファクタリングツール
kworkdev
PRO
1
420
DevinはクラウドエンジニアAIになれるのか!? 実践的なガードレール設計/devin-can-become-a-cloud-engineer-ai-practical-guardrail-design
tomoki10
3
1.4k
20250328_RubyKaigiで出会い鯛_____RubyKaigiから始まったはじめてのOSSコントリビュート.pdf
mterada1228
0
130
サーバシステムを無理なくコンテナ移行する際に伝えたい4つのポイント/Container_Happy_Migration_Method
ozawa
1
100
小さく始めるDevOps 内製化支援から見えたDevOpsの始め方 / 20250317 Ken Takayanagi
shift_evolve
1
100
初めてのPostgreSQLメジャーバージョンアップ
kkato1
0
440
ひまプロプレゼンツ 「エンジニア格付けチェック 〜春の公開収録スペシャル〜」
kaaaichi
0
140
新卒エンジニア研修の試行錯誤と工夫/nikkei-tech-talk-31
nishiuma
0
200
Go製のマイグレーションツールの git-schemalex の紹介と運用方法
shinnosuke_kishida
1
410
Enterprise AI in 2025?
pamelafox
0
100
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Designing Experiences People Love
moore
141
23k
Raft: Consensus for Rubyists
vanstee
137
6.8k
GraphQLとの向き合い方2022年版
quramy
45
14k
A Tale of Four Properties
chriscoyier
158
23k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Typedesign – Prime Four
hannesfritz
41
2.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
A Philosophy of Restraint
colly
203
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Transcript
Accessibility 11 Wednesday, October 12
A ccessibilit y 11 Wednesday, October 12
Why build accessible websites? • Because we’re decent human beings.
• Why wouldn’t we? • What are you, some kind of jerk? • C’mon, man. • C’mon. Wednesday, October 12
Why build accessible websites? • Because we’re decent human beings.
• Why wouldn’t we? • What are you, some kind of jerk? • C’mon, man. • C’mon. Wednesday, October 12
The power of the Web is in its universality. Access
by everyone regardless of disability is an essential aspect. Tim Berners-Lee “ Wednesday, October 12
Difficulty Seeing http://www.census.gov Severe Difficulty Seeing http://www.census.gov Internet Explorer 6
http://www.ie6countdown.com 1.4% 3.4% 0.8% Percentage of U.S. Population Suffering From: Wednesday, October 12
Difficulty Seeing http://www.census.gov Severe Difficulty Seeing http://www.census.gov Internet Explorer 6
http://www.ie6countdown.com 1.4% 3.4% 0.8% Percentage of U.S. Population Suffering From: Wednesday, October 12
Who is this for? Wednesday, October 12
Wednesday, October 12
Wednesday, October 12
Wednesday, October 12
Wednesday, October 12
Around 10 percent of the world’s population, or 650 million
people, live with a disability. They are the world's largest minority. The United Nations http://www.un.org/disabilities/default.asp?id=18 “ Wednesday, October 12
Context Wednesday, October 12
Context Wednesday, October 12
Progressive Enhancement Content First HTML CSS WAI-ARIA JavaScript Wednesday, October
12
Progressive Enhancement Content First HTML CSS WAI-ARIA JavaScript Wednesday, October
12
Progressive Enhancement Content First HTML CSS WAI-ARIA JavaScript Wednesday, October
12
Progressive Enhancement Content First HTML CSS WAI-ARIA JavaScript Wednesday, October
12
Progressive Enhancement Content First HTML CSS WAI-ARIA JavaScript Wednesday, October
12
We need to make smarter content, not smarter containers.* Stephanie
Rieger http://twitter.com/stephanierieger “ * We’re gonna make smarter containers, too. Wednesday, October 12
We need to make smarter content, not smarter containers.* Stephanie
Rieger http://twitter.com/stephanierieger “ * We’re gonna make smarter containers, too. Wednesday, October 12
Semantic Markup Wednesday, October 12
0 100 Wednesday, October 12
0 100 <input type="number" name="widget" min="0" max="100" value="0" /> Wednesday,
October 12
<label for="widget">Freeze-Ray Completion Percentage</label> <input type="number" name="widget" id="widget" min="0" max="100"
value="80" /> Wednesday, October 12
Freeze-Ray Completion Percentage 0 Wednesday, October 12
<div class="slider"> <a href="#" class="slider-handle"></a> </div> Wednesday, October 12
<div class="slider"> <a href="#" class="slider-handle" style="left: 80%;"></a> </div> Wednesday, October
12
Freeze-Ray Completion Percentage 0 Wednesday, October 12
0 Freeze-Ray Completion Percentage 50 Wednesday, October 12
<label for="widget">Freeze-Ray Completion Percentage</label> <input type="number" name="widget" id="widget" min="0" max="100"
value="80" /> <div class="slider"> <a href="#" class="slider-handle"></a> </div> Wednesday, October 12
<label for="widget">Freeze-Ray Completion Percentage</label> <input type="number" name="widget" id="widget" min="0" max="100"
value="80" /> Wednesday, October 12
<div class="percent-slider"> <label for="widget">Freeze-Ray Completion Percentage</label> <input type="number" name="widget" id="widget"
min="0" max="100" value="80" /> </div> Wednesday, October 12
.ui-slider label, .ui-slider input { position: absolute; left: -9999px; }
Wednesday, October 12
<div class="percent-slider"> <label for="widget">Freeze-Ray Completion Percentage</label> <input type="number" name="widget" id="widget"
min="0" max="100" value="80" /> </div> Wednesday, October 12
WAI-ARIA* *Web Accessibility Initiative - Accessible Rich Internet Applications Wednesday,
October 12
WAI-ARIA* *Web Accessibility Initiative - Accessible Rich Internet Applications Wednesday,
October 12
ARIA Attributes landmark "banner" "main" "navigation" role "slider" "tabs" state
"aria-expanded" "aria-checked" Wednesday, October 12
ARIA Attributes landmark "banner" "main" "navigation" role "slider" "tabs" state
"aria-expanded" "aria-checked" Wednesday, October 12
<div class="slider"> <a href="#" class="slider-handle" style="left: 80%;"></a> </div> “Number link.”
Wednesday, October 12
<div role="application" class="percent-slider"> <a href="#" class="slider-handle" style="left: 80%;" role="slider" aria-valuemin="0"
aria-valuemax="100" aria-valuenow="80" aria-valuetext="80%"> </a> </div> “Slider control: eighty percent. Use arrows to move handle.” Wednesday, October 12
<div role="application" class="percent-slider"> <a href="#" class="slider-handle" style="left: 80%;" role="slider" aria-valuemin="0"
aria-valuemax="100" aria-valuenow="80" aria-valuetext="80%"> </a> </div> “Slider control: eighty percent. Use arrows to move handle.” Wednesday, October 12
AWESOME Wednesday, October 12
Resources Designing with Progressive Enhancement Building the Web that Works
for Everyone http://wil.to/a11y/g http://wil.to/a11y/ http://twitter.com/wilto Wednesday, October 12