Web Standards, HTML 5, and Accessibility: Introduction
description
Transcript of Web Standards, HTML 5, and Accessibility: Introduction
![Page 1: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/1.jpg)
Web Standards, HTML 5, and Accessibility: Introduction
Greg KrausUniversity IT Accessibility Coordinator
NC State University
![Page 2: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/2.jpg)
HTML and Accessibility Standards
1993
HTML Standards
Accessibility Standards
HTM
L 1
HTM
L 2
HTM
L 3
HTM
L 4
HTM
L 5
WCA
G 2
WCA
G 1
508
1995 1997 1999 2008
![Page 3: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/3.jpg)
Growing Pains
W3C
Internet Explore
r
Netscape
Firefox
Safari
Opera
![Page 4: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/4.jpg)
The New Kid on the Block (HTML 5)
W3C WHATWG
W3C WHATWG
![Page 5: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/5.jpg)
Why this doesn’t work<webpage>
<pageproperties><title>My First Web Page</title></pageproperties>
<content><paragraph>Welcome to my page!</paragraph></content>
</webpage>
![Page 6: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/6.jpg)
DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
![Page 7: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/7.jpg)
Once we agree on a language<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head><title>My First Web Page</title></head>
<body><p>Welcome to my page!</p></body>
</html>
![Page 8: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/8.jpg)
HTML 1 (1993)
• <h1>, <h2> ... <h6>• <p> • <img>– src– align– alt
• <listing>, <xmp>– deprecated– <pre>
![Page 9: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/9.jpg)
HTML 2 (1995)
• <form>• <input>• <img>– ismap
![Page 10: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/10.jpg)
HTML 3 (1997)
• <applet>– only works with Java applets
<applet code="AudioItem" width=15 height=15><param name=snd value="Hello.au”>Java applet that plays a welcoming sound.
</applet>
![Page 11: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/11.jpg)
HTML 4 (1999)
• <object> <embed>• <applet> deprecated• Accessibility of objects inserted into pages
![Page 12: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/12.jpg)
HTML 5
• <audio>• <video>
![Page 13: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/13.jpg)
Deprecated and Obsolete
• Deprecated = currently supported but don’t rely on it in the future– HTML 4 deprecated <font> <applet>
• Obsolete = no guarantee of current support– HTML 5 made obsolete <font> <applet>
![Page 14: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/14.jpg)
HTML and Accessibility Standards
1993
HTML Standards
Accessibility Standards
HTM
L 1
HTM
L 2
HTM
L 3
HTM
L 4
HTM
L 5
WCA
G 2
WCA
G 1
508
1995 1997 1999 2008
![Page 15: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/15.jpg)
Section 508
• Purchasing and development requirement for Federal entities, or entities receiving Federal money
• Released in 1998• 381 words long• Section 508 Refresh• http://www.access-board.gov/508.htm
![Page 16: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/16.jpg)
WCAG 2.0
• Released in 2008• 14,000+ words in the standard• 300,000+ words of support documentation
![Page 17: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/17.jpg)
WCAG 2.0 Contents – POUR
• Perceivable
• Operable
• Understandable
• Robust
![Page 18: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/18.jpg)
The English Translation
• Perceivable
• Operable
• Understandable
• Robust
Can I “see” it?
Can I “touch” it?
Can I understand it?
Can I break it?
![Page 19: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/19.jpg)
![Page 20: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/20.jpg)
Perceivable: Text Equivalents
![Page 21: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/21.jpg)
Operable: Document Structure
![Page 22: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/22.jpg)
Operable: Keyboard Navigation
![Page 23: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/23.jpg)
Understandable: Error Messages
![Page 24: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/24.jpg)
Robust: A Slide Through History
![Page 25: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/25.jpg)
Slider: HTML 4<form onsubmit="return false;"><div tabindex="1" id="slider-1">
<input id="slider-input-1"><div class="line"><div style="width: 445px;"></div></div><div class="handle" ><div> </div></div>
</div></form>
+ hundreds of lines of JavaScript
![Page 26: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/26.jpg)
How This Works on Desktop Applications
![Page 27: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/27.jpg)
Slider: HTML 4 + ARIA
<div id="sliderBar“ role="slider“ aria-valuetext=“18%" aria-valuenow=“18" aria-valuemax="100" aria-valuemin="0">……</div>
+ hundreds of lines of JavaScript
![Page 28: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/28.jpg)
Slider: HTML 5
<form><input name=“myRange" type="range"
min=“0" max="10" value=“2"></form>
0 lines of JavaScript
![Page 29: Web Standards, HTML 5, and Accessibility: Introduction](https://reader035.fdocuments.us/reader035/viewer/2022062310/5681616a550346895dd0f7e7/html5/thumbnails/29.jpg)
Questions?