1 / 29

Web Standards, HTML 5, and Accessibility: Introduction

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.

flo
Download Presentation

Web Standards, HTML 5, and Accessibility: Introduction

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Standards, HTML 5, and Accessibility: Introduction Greg Kraus University IT Accessibility Coordinator NC State University

  2. HTMLand Accessibility Standards HTML Standards HTML 4 HTML 2 HTML 1 HTML 3 HTML 5 Accessibility Standards 508 WCAG 2 WCAG 1 1999 1995 1997 1993 2008

  3. Growing Pains

  4. The New Kid on the Block (HTML 5)

  5. Why this doesn’t work <webpage> <pageproperties> <title>My First Web Page</title> </pageproperties> <content> <paragraph>Welcome to my page!</paragraph> </content> </webpage>

  6. 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">

  7. 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>

  8. HTML 1 (1993) • <h1>, <h2> ... <h6> • <p> • <img> • src • align • alt • <listing>, <xmp> • deprecated • <pre>

  9. HTML 2 (1995) • <form> • <input> • <img> • ismap

  10. 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>

  11. HTML 4 (1999) • <object> <embed> • <applet> deprecated • Accessibility of objects inserted into pages

  12. HTML 5 • <audio> • <video>

  13. 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>

  14. HTMLand Accessibility Standards HTML Standards HTML 4 HTML 2 HTML 1 HTML 3 HTML 5 Accessibility Standards 508 WCAG 2 WCAG 1 1999 1995 1997 1993 2008

  15. 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

  16. WCAG 2.0 • Released in 2008 • 14,000+ words in the standard • 300,000+ words of support documentation

  17. WCAG 2.0 Contents – POUR • Perceivable • Operable • Understandable • Robust

  18. The English Translation Can I “see” it? Can I “touch” it? Can I understand it? Can I break it? • Perceivable • Operable • Understandable • Robust

  19. Perceivable: Text Equivalents

  20. Operable: Document Structure

  21. Operable: Keyboard Navigation

  22. Understandable: Error Messages

  23. Robust: A Slide Through History

  24. 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>&nbsp;</div> </div> </div> </form> + hundreds of lines of JavaScript

  25. How This Works on Desktop Applications

  26. 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

  27. Slider: HTML 5 <form> <input name=“myRange" type="range" min=“0" max="10" value=“2"> </form> 0 lines of JavaScript

  28. Questions?

More Related