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
ObsidianをMCP連携させてみる
ttnyt8701
2
140
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
2
1k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
53
31k
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
4
470
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
220
初めてのAzure FunctionsをClaude Codeで作ってみた / My first Azure Functions using Claude Code
hideakiaoyagi
1
180
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
2
1.2k
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
0
120
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
230
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
470
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
10
2.8k
Amazon Q Developer for GitHubとAmplify Hosting でサクッとデジタル名刺を作ってみた
kmiya84377
0
3.5k
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
KATA
mclloyd
29
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Adopting Sorbet at Scale
ufuk
77
9.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Why Our Code Smells
bkeepers
PRO
337
57k
A Tale of Four Properties
chriscoyier
159
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Bash Introduction
62gerente
614
210k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
480
Making Projects Easy
brettharned
116
6.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
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