Web Standards, HTML 5, and Accessibility: Introduction
Greg KrausUniversity IT Accessibility Coordinator
NC State University
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
Growing Pains
W3C
Internet Explore
r
Netscape
Firefox
Safari
Opera
The New Kid on the Block (HTML 5)
W3C WHATWG
W3C WHATWG
Why this doesn’t work<webpage>
<pageproperties><title>My First Web Page</title></pageproperties>
<content><paragraph>Welcome to my page!</paragraph></content>
</webpage>
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">
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>
HTML 1 (1993)
• <h1>, <h2> ... <h6>• <p> • <img>– src– align– alt
• <listing>, <xmp>– deprecated– <pre>
HTML 2 (1995)
• <form>• <input>• <img>– ismap
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>
HTML 4 (1999)
• <object> <embed>• <applet> deprecated• Accessibility of objects inserted into pages
HTML 5
• <audio>• <video>
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>
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
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
WCAG 2.0
• Released in 2008• 14,000+ words in the standard• 300,000+ words of support documentation
WCAG 2.0 Contents – POUR
• Perceivable
• Operable
• Understandable
• Robust
The English Translation
• Perceivable
• Operable
• Understandable
• Robust
Can I “see” it?
Can I “touch” it?
Can I understand it?
Can I break it?
Perceivable: Text Equivalents
Operable: Document Structure
Operable: Keyboard Navigation
Understandable: Error Messages
Robust: A Slide Through History
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
How This Works on Desktop Applications
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
Slider: HTML 5
<form><input name=“myRange" type="range"
min=“0" max="10" value=“2"></form>
0 lines of JavaScript
Questions?
