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.4k
Other Decks in Technology
See All in Technology
LLM 機能を支える Langfuse / ClickHouse のサーバレス化
yuu26
3
270
生成AI導入の効果を最大化する データ活用戦略
ham0215
0
110
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
3
1.1k
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
moriyuya
0
1k
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
250
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
170
【CEDEC2025】ブランド力アップのためのコンテンツマーケティング~ゲーム会社における情報資産の活かし方~
cygames
PRO
0
230
LLMで構造化出力の成功率をグンと上げる方法
keisuketakiguchi
0
420
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
340
Agent Development Kitで始める生成 AI エージェント実践開発
danishi
0
120
データ基盤の管理者からGoogle Cloud全体の管理者になっていた話
zozotech
PRO
0
340
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
430
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Unsuck your backbone
ammeep
671
58k
Building Adaptive Systems
keathley
43
2.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
RailsConf 2023
tenderlove
30
1.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Java REST API Framework Comparison - PWX 2021
mraible
32
8.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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