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
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
5.1k
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
580
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
0
110
初めてのDatabricks Apps開発
taka_aki
1
200
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
240
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2.1k
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
0
200
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
370
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
220
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
フレームワークを意識させないワークショップづくり
keigosuda
0
210
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
580
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Scaling GitHub
holman
463
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Site-Speed That Sticks
csswizardry
13
910
The Invisible Side of Design
smashingmag
302
51k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
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