View
1.686
Download
1
Category
Preview:
DESCRIPTION
Mat Marquis,
Citation preview
Accessibility11
Wednesday, October 12
Accessibility11
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 Seeinghttp://www.census.gov
Severe Difficulty Seeinghttp://www.census.gov
Internet Explorer 6http://www.ie6countdown.com 1.4%
3.4%
0.8%
Percentage of U.S. Population Suffering From:
Wednesday, October 12
Difficulty Seeinghttp://www.census.gov
Severe Difficulty Seeinghttp://www.census.gov
Internet Explorer 6http://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 Nationshttp://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 Riegerhttp://twitter.com/stephanierieger
“
* We’re gonna make smarter containers, too.Wednesday, October 12
We need to make smarter content,not smarter containers.*
Stephanie Riegerhttp://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
0Freeze-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 ApplicationsWednesday, October 12
WAI-ARIA*
*Web Accessibility Initiative - Accessible Rich Internet ApplicationsWednesday, 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 EnhancementBuilding the Web that Works for Everyone
http://wil.to/a11y/g
http://wil.to/a11y/
http://twitter.com/wilto
Wednesday, October 12
Recommended