accessibility by mat marquis
DESCRIPTION
Mat Marquis,TRANSCRIPT
![Page 1: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/1.jpg)
Accessibility11
Wednesday, October 12
![Page 2: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/2.jpg)
Accessibility11
Wednesday, October 12
![Page 3: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/3.jpg)
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
![Page 4: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/4.jpg)
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
![Page 5: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/5.jpg)
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
![Page 6: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/6.jpg)
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
![Page 7: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/7.jpg)
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
![Page 8: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/8.jpg)
Who is this for?
Wednesday, October 12
![Page 9: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/9.jpg)
Wednesday, October 12
![Page 10: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/10.jpg)
Wednesday, October 12
![Page 11: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/11.jpg)
Wednesday, October 12
![Page 12: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/12.jpg)
Wednesday, October 12
![Page 13: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/13.jpg)
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
![Page 14: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/14.jpg)
Context
Wednesday, October 12
![Page 15: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/15.jpg)
Context
Wednesday, October 12
![Page 16: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/16.jpg)
Progressive Enhancement
Content First
HTML
CSS
WAI-ARIA
JavaScript
Wednesday, October 12
![Page 17: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/17.jpg)
Progressive Enhancement
Content First
HTML
CSS
WAI-ARIA
JavaScript
Wednesday, October 12
![Page 18: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/18.jpg)
Progressive Enhancement
Content First
HTML
CSS
WAI-ARIA
JavaScript
Wednesday, October 12
![Page 19: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/19.jpg)
Progressive Enhancement
Content First
HTML
CSS
WAI-ARIA
JavaScript
Wednesday, October 12
![Page 20: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/20.jpg)
Progressive Enhancement
Content First
HTML
CSS
WAI-ARIA
JavaScript
Wednesday, October 12
![Page 21: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/21.jpg)
We need to make smarter content,not smarter containers.*
Stephanie Riegerhttp://twitter.com/stephanierieger
“
* We’re gonna make smarter containers, too.Wednesday, October 12
![Page 22: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/22.jpg)
We need to make smarter content,not smarter containers.*
Stephanie Riegerhttp://twitter.com/stephanierieger
“
* We’re gonna make smarter containers, too.Wednesday, October 12
![Page 23: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/23.jpg)
Semantic Markup
Wednesday, October 12
![Page 24: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/24.jpg)
0 100
Wednesday, October 12
![Page 25: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/25.jpg)
0 100
<input type="number" name="widget" min="0" max="100" value="0" />
Wednesday, October 12
![Page 26: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/26.jpg)
<label for="widget">Freeze-Ray Completion Percentage</label>
<input type="number" name="widget" id="widget"
min="0"
max="100"
value="80"
/>
Wednesday, October 12
![Page 27: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/27.jpg)
Freeze-Ray Completion Percentage
0
Wednesday, October 12
![Page 28: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/28.jpg)
<div class="slider"> <a href="#" class="slider-handle"></a></div>
Wednesday, October 12
![Page 29: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/29.jpg)
<div class="slider"> <a href="#" class="slider-handle" style="left: 80%;"></a></div>
Wednesday, October 12
![Page 30: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/30.jpg)
Freeze-Ray Completion Percentage
0
Wednesday, October 12
![Page 31: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/31.jpg)
0Freeze-Ray Completion Percentage
50
Wednesday, October 12
![Page 32: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/32.jpg)
<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
![Page 33: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/33.jpg)
<label for="widget">Freeze-Ray Completion Percentage</label>
<input type="number" name="widget" id="widget"
min="0"
max="100"
value="80"
/>
Wednesday, October 12
![Page 34: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/34.jpg)
<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
![Page 35: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/35.jpg)
.ui-slider label,
.ui-slider input {
position: absolute;
left: -9999px;
}
Wednesday, October 12
![Page 36: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/36.jpg)
<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
![Page 37: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/37.jpg)
WAI-ARIA*
*Web Accessibility Initiative - Accessible Rich Internet ApplicationsWednesday, October 12
![Page 38: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/38.jpg)
WAI-ARIA*
*Web Accessibility Initiative - Accessible Rich Internet ApplicationsWednesday, October 12
![Page 39: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/39.jpg)
ARIA Attributes
landmark"banner" "main" "navigation"
role"slider" "tabs"
state"aria-expanded" "aria-checked"
Wednesday, October 12
![Page 40: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/40.jpg)
ARIA Attributes
landmark"banner" "main" "navigation"
role"slider" "tabs"
state"aria-expanded" "aria-checked"
Wednesday, October 12
![Page 41: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/41.jpg)
<div class="slider">
<a href="#" class="slider-handle" style="left: 80%;"></a>
</div>
“Number link.”
Wednesday, October 12
![Page 42: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/42.jpg)
<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
![Page 43: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/43.jpg)
<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
![Page 44: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/44.jpg)
AWESOME
Wednesday, October 12
![Page 45: Accessibility by Mat Marquis](https://reader035.vdocuments.site/reader035/viewer/2022062319/5549fae7b4c905e56c8b4a51/html5/thumbnails/45.jpg)
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