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
310
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
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
210
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
8
1.1k
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
160
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
3
6k
AWSを活用したIoTにおけるセキュリティ対策のご紹介
kwskyk
0
350
EDRの検知の仕組みと検知回避について
chayakonanaika
12
4.9k
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
260
JavaにおけるNull非許容性
skrb
2
2.6k
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
130
手を動かしてレベルアップしよう!
maruto
0
220
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
520
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
380
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
YesSQL, Process and Tooling at Scale
rocio
172
14k
The World Runs on Bad Software
bkeepers
PRO
67
11k
A designer walks into a library…
pauljervisheath
205
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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