web standards, html 5, and accessibility: introduction
DESCRIPTION
Web Standards, HTML 5, and Accessibility: Introduction. Greg Kraus University IT Accessibility Coordinator NC State University. HTML and Accessibility Standards. HTML Standards. HTML 4. HTML 2. HTML 1. HTML 3. HTML 5. Accessibility Standards. 508. WCAG 2. WCAG 1. 1999. 1995. 1997. - PowerPoint PPT PresentationTRANSCRIPT
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?