Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5 accessibility

4,306 views

Published on

A presentation for John Slatin AccessU in May 2011 in Austin, TX.

Published in: Technology, Design
  • Be the first to comment

Html5 accessibility

  1. 1. HTML5 and Accessibility John Slatin AccessU 2011 Virginia DeBolt, presenter www.webteacher.ws
  2. 2. Theory and Practice <ul><li>Satisfy your curiosity about what HTML5 is and isn't </li></ul><ul><li>Learn HTML5 you can use now and what isn't ready yet </li></ul><ul><li>Frequent lab breaks to put HTML5 into practice </li></ul>
  3. 3. A Brief History of HTML5 <ul><li>W3C published HTML 4.01 in 1999 </li></ul><ul><li>W3C next published XHTML 1.0 and XHTML 1.1 </li></ul><ul><li>W3C started on XHTML 2 </li></ul><ul><ul><li>Opera, Mozilla, Apple wanted to head toward web apps instead </li></ul></ul><ul><ul><li>Arguments, disagreements, rejections, faceoffs . . . enter WHATWG </li></ul></ul><ul><ul><li>WHATWG, separate from W3C, worked on Web Forms and Web Apps which combined and grew into HTML5 </li></ul></ul>
  4. 4. A Brief History of HTML5, 2 <ul><li>W3C decided XHTML 2 was a bad idea, dumped it in 2009 </li></ul><ul><li>W3C chartered new HTML Working Group, based on the work done in the WHATWG </li></ul><ul><li>While W3C is now working on HTML5, the WHATWG continues. </li></ul><ul><ul><li>WHATWG creates specs </li></ul></ul><ul><ul><li>W3C reviews and seeks comments </li></ul></ul><ul><li>It's messy, but it's working </li></ul>
  5. 5. A Brief History of HTML5, 3 <ul><li>HTML5 should become &quot;candidate recommendation&quot; in 2012 – it's now a working draft </li></ul><ul><li>HTML5 is not more accessible (yet) </li></ul><ul><li>We can start using it in small steps </li></ul>
  6. 6. Goals and Principles <ul><li>Support existing content </li></ul><ul><li>Codify what works </li></ul><ul><li>Support users over authors </li></ul><ul><li>Keep it simple, eg. </li></ul><ul><ul><li>DOCTYPE </li></ul></ul><ul><ul><li>Charset </li></ul></ul><ul><ul><li>Link </li></ul></ul><ul><ul><li>Script </li></ul></ul><ul><li>Power to support web apps </li></ul><ul><li>Support web forms </li></ul>
  7. 7. Problematic Areas <ul><li>It's a working draft under constant change </li></ul><ul><li>Not more accessible than previous specs – yet </li></ul><ul><li>There's some confusion over alt text </li></ul><ul><li>The heading structure for HTML5 is not useful in assistive devices - yet </li></ul><ul><li>Work is ongoing to make some elements such as canvas accessible, but is incomplete </li></ul><ul><li>Audio and video aren't accessible - yet </li></ul>
  8. 8. Alt text <ul><li>The W3C suggests techniques for situations like buttons, charts, images of text, decorative images, images that contribute to a theme, icons, images of pictures, webcam images, CAPTCHA images, images in figures. </li></ul>
  9. 9. Try the Simplified Joy <ul><li><!DOCTYPE html> </li></ul><ul><li><meta charset=&quot;UTF-8&quot;> </li></ul><ul><li><script src=&quot;file.js></script> </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;file.css&quot;> </li></ul>
  10. 10. Syntax <ul><li>Uppercase, lowercase, camel case: check </li></ul><ul><li>Attributes quoted, attributes not quoted: check </li></ul><ul><li>Self-closing or not: check </li></ul><ul><li>No deprecated elements, only obsolete elements – don't use 'em, but they work: check </li></ul>
  11. 11. Oh, the Joy: Syntax <ul><li><IMG src=&quot;image.gif&quot;> </li></ul><ul><li><img src=image.gif /> </li></ul><ul><li><img src=&quot;image.gif&quot;> </li></ul><ul><li><img SRC=image.gif> </li></ul>
  12. 12. Reworked & Not Obsolete <ul><li><small> now means small print or legalese </li></ul><ul><li><b> now means to be stylistically offset from normal prose without conveying any extra importance. <strong> still means importance </li></ul><ul><li><i> now means an alternate voice or mood. <em> still means emphasis. <em> elements can be nested to indicate strong emphasis. </li></ul><ul><li><cite> now means the title of a work but not a person's name </li></ul>
  13. 13. Restored or acknowledged <ul><li>iframe targets are now restored </li></ul><ul><li>Value attributes in list items to indicate start number or item number are restored </li></ul><ul><li>Embed is acknowledged and understood </li></ul>
  14. 14. Try the Joy <ul><li><!DOCTYPE html> </li></ul><ul><li><html lang=&quot;en&quot;> </li></ul><ul><li><head> </li></ul><ul><li><title>Try the Joy</title> </li></ul><ul><li><meta charset=&quot;UTF-8&quot;> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  15. 15. Try the Joy <ul><li><body> </li></ul><ul><li><h3>Element changes in HTML5</h3> <small>this is small print - really</small><br> <b>this is stylistically offset</b><br> <i>this is in an alternate voice or mood</i><br> <cite>InterACT with Web Standards: A Holistic Approach to Web Design</cite> </li></ul>
  16. 16. New Rich Media Elements <ul><li><canvas> </li></ul><ul><li><video> </li></ul><ul><li><audio> </li></ul>
  17. 17. New Semantic Sectioning Elements are a Giant Step Forward <ul><li><section> </li></ul><ul><li><header> </li></ul><ul><li><hgroup> </li></ul><ul><li><footer> </li></ul><ul><li><aside> </li></ul><ul><li><nav> </li></ul><ul><li><article> </li></ul>
  18. 18. New Form Features <ul><li>New attributes </li></ul><ul><ul><li>placeholder </li></ul></ul><ul><ul><li>autofocus </li></ul></ul><ul><ul><li>required </li></ul></ul><ul><ul><li>autocomplete </li></ul></ul><ul><li>New input types </li></ul><ul><ul><li>search </li></ul></ul><ul><ul><li>email </li></ul></ul><ul><ul><li>website </li></ul></ul><ul><ul><li>phone </li></ul></ul><ul><ul><li>range </li></ul></ul><ul><ul><li>number </li></ul></ul><ul><ul><li>dates and times </li></ul></ul><ul><ul><li>color </li></ul></ul>
  19. 19. Sectioning semantically <ul><li>A typical web page layout </li></ul><ul><li>Previously done with divs </li></ul><ul><li>How would it be done with HTML5 semantic elements? </li></ul>
  20. 20. A high level look
  21. 21. header <ul><li>articles, sections, footers and asides can have header elements </li></ul><ul><li>hgroup elements can be used when more than one heading element is needed </li></ul><ul><li>Every header on the page can have an h1 </li></ul><ul><li>headers can contain nav elements </li></ul><ul><li><header> <hgroup> <h1>Main Heading</h1> <h2>Secondary Heading</h2> </hgroup> <nav> <ul><li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li></ul> </nav> </li></ul><ul><li></header> </li></ul>
  22. 22. The a element <ul><li>In HTML5 you can wrap multiple elements in a single <a> element <a href=&quot;about.html&quot;> <h2>About Us</h2> <p>Find out how to contact us.</p> </a> </li></ul>
  23. 23. Try the Joy <ul><li><header> </li></ul><ul><li><nav> <ul><li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li></ul> </li></ul><ul><li></nav> </li></ul><ul><li><a href=&quot;trythejoy.html&quot;><img src=&quot;logo.jpg&quot; alt=&quot;try the joy&quot;></a> </li></ul><ul><li><hgroup>            <h1>Try the Joy</h1> <h2>Coding a Page in HTML5</h2> </hgroup> </li></ul><ul><li></header> </li></ul>
  24. 24. ARIA Roles <ul><li>All browsers don't know HTML5, but ARIA can help </li></ul><ul><li>article </li></ul><ul><li>columnheader </li></ul><ul><li>definition </li></ul><ul><li>directory </li></ul><ul><li>document </li></ul><ul><li>group </li></ul><ul><li>heading </li></ul><ul><li>img </li></ul><ul><li>list </li></ul><ul><li>ARIA roles can describe document structure </li></ul><ul><li>listitem </li></ul><ul><li>math </li></ul><ul><li>note </li></ul><ul><li>presentation </li></ul><ul><li>region </li></ul><ul><li>row </li></ul><ul><li>rowheader </li></ul><ul><li>separator </li></ul><ul><li>toolbar </li></ul>
  25. 25. ARIA Roles <ul><li>ARIA roles can be navigational landmarks </li></ul><ul><li>application </li></ul><ul><li>banner </li></ul><ul><li>complementary </li></ul><ul><li>contentinfo </li></ul><ul><li>form </li></ul><ul><li>main </li></ul><ul><li>navigation </li></ul><ul><li>search </li></ul>
  26. 26. Support for ARIA Roles <ul><li>According to the Paciello Group , </li></ul><ul><li>Landmark roles are currently supported In JAWS version 10 screen reader ,  NVDA 2010.1 and VoiceOver on iPhone IOS4. </li></ul><ul><li>The current version of Window Eyes screen reader has bugs related to the use of ARIA. </li></ul><ul><li>According to Jared Smith at WebAIM , &quot;some things cannot be made accessible without ARIA.&quot; </li></ul>
  27. 27. Give a Listen with YouTube <ul><li>How screen readers speak a simple HTML5 page when ARIA roles were added </li></ul><ul><li>http://www.youtube.com/watch?v=LP3zLrOjQSY&feature=player_embedded </li></ul>
  28. 28. Try the Joy <ul><li><header id=&quot;banner&quot; role=&quot;banner&quot; > </li></ul><ul><li><nav id=&quot;globalnav&quot; role=&quot;navigation&quot; > <ul><li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li></ul> </nav> </li></ul><ul><li><a href=&quot;trythejoy.html&quot;><img src=&quot;logo.jpg&quot; alt=&quot;try the joy&quot;></a> </li></ul><ul><li><hgroup role=&quot;heading&quot;>              <h1>Try the Joy</h1>   <h2>Coding a Page in HTML5</h2> </hgroup> </li></ul><ul><li></header> </li></ul>
  29. 29. Try the Joy <ul><li>Some people are suggesting nested divs to create style hooks. Use a class name that matches the HTML5 semantic element, and style with the class name. </li></ul><ul><li><nav role=&quot;navigation&quot;> </li></ul><ul><li><div class=&quot;nav&quot; > <ul><li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li></ul> </li></ul><ul><li></div> </li></ul><ul><li></nav> </li></ul>
  30. 30. Semantics and Roles <ul><li>When HTML5 semantic elements such as nav and aside are widely meaningful to AT devices, the ARIA landmark roles can be dropped. ARIA does add meaningful help, however </li></ul>
  31. 31. Sections and Articles <ul><li>Sections can contain articles </li></ul><ul><li>Articles can contain sections </li></ul>
  32. 32. Section <ul><li>The section element groups related content. This might be a part or chapter in a book, a section in a chapter, or  anything that had its own heading in HTML 4. Each section may include other new semantic elements such as article, header and footer, and well as various kinds of HTML elements such as images, paragraphs, list, etc. </li></ul>
  33. 33. Article <ul><li>The article element is more a singular, discrete piece than can be lifted whole for syndication or use elsewhere. </li></ul><ul><li>Articles can contain header, footer, section, nav, aside and other elements. </li></ul>
  34. 34. Section
  35. 35. Section <ul><li><section> <article>First Article</article> <article>Second Article</article> </li></ul><ul><li></section> </li></ul>
  36. 36. Section <ul><li><section id=&quot;maincontent&quot; role=&quot;main&quot; > <article>First Article</article> <article>Second Article</article> </li></ul><ul><li></section> </li></ul>
  37. 37. Section <ul><li><section> <h3>Element changes in HTML5</h3> <small>this is small print - really</small><br> <b>this is stylistically offset</b><br> <i>this is in an alternate voice or mood</i><br> <cite>InterACT with Web Standards: A Holistic Approach to Web Design</cite> </li></ul><ul><li></section> </li></ul>
  38. 38. Article Recap <ul><li>Articles are meant to be complete units–something you can pick up and move around </li></ul><ul><li>Articles can contain header, hgroup, section, aside, footer and other elements </li></ul>
  39. 39. Article Joy <ul><li><article class=&quot;feature&quot;> </li></ul><ul><li><header role=&quot;heading&quot;> </li></ul><ul><li><h1>An Example Article</h1> </li></ul><ul><li></header> </li></ul><ul><li><p>Any content that would be needed can be used in an article. For example, illustrations, diagrams, photos, code listings, photos, videos, and other material can be put in a figure element with a figcaption. </li></ul><ul><li></p> </li></ul>
  40. 40. Article Joy, 2 <ul><li><figure><img src=&quot;cup_cat.jpg&quot; alt=&quot;A tiny cat in a teacup&quot;><br> </li></ul><ul><li><figcaption>A tiny cat in a teacup</figcaption></figure> </li></ul><ul><li><p>You can insert tables, video, links, lists, etc. Just add content as usual.</p> </li></ul>
  41. 41. Article Joy, 3 <ul><li><footer class=&quot;featurefooter&quot;> </li></ul><ul><li><p><a href=&quot;commentpage.html&quot;>Leave a comment.</a><br> </li></ul><ul><li>&copy; copyright 2010. Published Date xxxx.</p> </li></ul><ul><li><p class=&quot;vcard&quot;>Written by <a class=&quot;url fn&quot; href=&quot;http://vdebolt.com&quot;>Virginia DeBolt</a></p> </li></ul><ul><li></footer> </li></ul><ul><li></article> </li></ul>
  42. 42. Add more <ul><li>Copy and paste the first article to create another one or two that are similar. </li></ul><ul><li>Moving on to the aside: </li></ul><ul><ul><li>The aside element is tangentially related content </li></ul></ul><ul><ul><li>It could be similar to the familiar 'sidebar', however it could also be a pull quote or any chunk of content that is separate from the main content. </li></ul></ul><ul><li>Put one in the footer. </li></ul>
  43. 43. Try the joy: aside <ul><li><p class=&quot;vcard&quot;>Written by <a class=&quot;url fn&quot; href=&quot;http://vdebolt.com&quot;>Virginia DeBolt</a></p> </li></ul><ul><li><aside class=&quot;aboutauthor&quot;> <h3>About the Author</h3> </li></ul><ul><li><p>Virginia DeBolt is the author of blah and blah. She blogs at blah and is a big blah.</p> </li></ul><ul><li></aside> </li></ul><ul><li></footer> </li></ul><ul><li></article> </li></ul>
  44. 44. Try the joy: aside <ul><li><aside class=&quot;aboutauthor&quot; role=&quot;complementary&quot; > <h3>About the Author</h3> </li></ul><ul><li><p>Virginia DeBolt is the author of blah and blah. She blogs at blah and is a big blah.</p> </li></ul><ul><li></aside> </li></ul>
  45. 45. The Aside as Sidebar
  46. 46. Try the joy <ul><li><aside id=&quot;sidebar&quot;> </li></ul><ul><li>Wrap that existing section about element changes in HTML5 in this aside. </li></ul><ul><li></aside> </li></ul>
  47. 47. Try the joy <ul><li><aside id=&quot;sidebar&quot; role=&quot;complementary&quot; > </li></ul><ul><li>Wrap that existing section about element changes in HTML5 in this aside. </li></ul><ul><li></aside> </li></ul>
  48. 48. Try the joy <ul><li><aside id=&quot;sidebar&quot; role=&quot;complementary&quot;> </li></ul><ul><li><section class=&quot;related&quot;> </li></ul><ul><li><h3>Read related articles</h3> </li></ul><ul><li><nav id=&quot;relatednav&quot; role=&quot;navigation&quot;> <ul> <li><a href=&quot;#&quot;>context link 1</a></li> <li><a href=&quot;#&quot;>context link 2</a></li> <li><a href=&quot;#&quot;>context link 3</a></li> <li><a href=&quot;#&quot;>context link 4</a></li> </ul> </li></ul><ul><li></nav> </li></ul><ul><li></section> </li></ul><ul><li></aside> </li></ul>
  49. 49. Footer <ul><li>Footers can be used with sections and articles </li></ul><ul><li>Footers can be used in the traditional sense to contain site information at the end of a page </li></ul>
  50. 50. Try the footer <ul><li><footer id=&quot;pagefoot&quot; role=&quot;contentinfo&quot;> </li></ul><ul><li>Footer content goes here. Now's your chance to use small. The footer can contain sections, asides, navs and other relevant structures to describe the page. </li></ul><ul><li></footer> </li></ul>
  51. 51. HTML5 shim <ul><li>HTML5 shim is a JavaScript that helps IE versions before IE9 to recognize and style HTML5 elements. </li></ul><ul><li><!--[if lt IE 9]> <script src=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;></script> <![endif]--> </li></ul>
  52. 52. HTML5 Forms <ul><li>New Attributes </li></ul><ul><ul><li>Placeholder </li></ul></ul><ul><ul><li>Autofocus </li></ul></ul><ul><ul><li>Required </li></ul></ul><ul><ul><li>Autocomplete </li></ul></ul><ul><ul><li>list </li></ul></ul><ul><li>New Elements </li></ul><ul><ul><li>Datalist </li></ul></ul><ul><li>New Input Types </li></ul><ul><ul><li>Search </li></ul></ul><ul><ul><li>Email </li></ul></ul><ul><ul><li>url </li></ul></ul><ul><ul><li>Tel </li></ul></ul><ul><ul><li>Range </li></ul></ul><ul><ul><li>Number </li></ul></ul><ul><ul><li>Date </li></ul></ul><ul><ul><li>Color </li></ul></ul>
  53. 53. What to do with forms? <ul><li>Look at some code examples </li></ul><ul><li>Wait for improvements in implementation and accessibility before using most of them </li></ul>
  54. 54. Attributes <ul><li><input id=&quot;fname&quot; name=&quot;fname&quot; type=&quot;text&quot; placeholder =&quot;First Name&quot;> </li></ul><ul><li>You can add: </li></ul><ul><li><input id=&quot;fname&quot; name=&quot;fname&quot; type=&quot;text&quot; placeholder=&quot;First Name&quot; autofocus > </li></ul><ul><li>You can add: </li></ul><ul><li><input id=&quot;fname&quot; name=&quot;fname&quot; type=&quot;text&quot; placeholder=&quot;First Name&quot; autofocus required > </li></ul>
  55. 55. The autocomplete attribute <ul><li>Uses &quot;on&quot; or &quot;off&quot; values. &quot;On&quot; is the default. </li></ul><ul><li><form action=&quot;runscript.php&quot; autocomplete=&quot;off&quot; > </li></ul><ul><li><input id=&quot;fname&quot; name=&quot;fname&quot; type=&quot;text&quot; placeholder=&quot;First Name&quot; autocomplete=&quot;off&quot; > </li></ul>
  56. 56. Datalist element <ul><li>Using the list attribute, you can associate options with an input field. </li></ul><ul><li><input type=&quot;text&quot; name=&quot;writer&quot; id=&quot;writer&quot; list=&quot;writers&quot;> </li></ul><ul><li>< datalist id=&quot;writers&quot;> </li></ul><ul><li><option value=&quot;Dr. Seuss&quot;> </li></ul><ul><li><option value=&quot;Mickey Spillane&quot;> </li></ul><ul><li><option value=&quot;Mother Goose&quot;> </li></ul><ul><li><option value=&quot;Phillip Roth&quot;> </li></ul><ul><li></ datalist > </li></ul>
  57. 57. Search input type <ul><li>If the search input type is implemented in the browser, the input field will look like a search field. </li></ul><ul><li><input id=&quot;query&quot; name&quot;query&quot; type=&quot;search&quot; > </li></ul>
  58. 58. More input types <ul><li><input type=&quot;email&quot; name=&quot;email&quot; id=&quot;email&quot;> </li></ul><ul><li><input type=&quot;url&quot; name=&quot;website&quot; id=&quot;website&quot;> </li></ul><ul><li><input type=&quot;tel&quot; name=&quot;phone&quot; id=&quot;phone&quot;> </li></ul>
  59. 59. More input types <ul><li>Sliders </li></ul><ul><li><input id=&quot;amount&quot; name=&quot;amount&quot; type=&quot;range&quot; min=&quot;1&quot; max=&quot;5&quot;> </li></ul><ul><li>Spinners </li></ul><ul><li><input id=&quot;total&quot; name=&quot;total&quot; type=&quot;number&quot; min=&quot;5&quot; max=&quot;20&quot;> </li></ul>
  60. 60. Date and Time Input Types <ul><li>date: year, month, day </li></ul><ul><li>datetime: year, month, day with hours, minutes, and seconds and timezone </li></ul><ul><li>datetime-local: no timezone </li></ul><ul><li>time: hours, minutes, seconds </li></ul><ul><li>month: year and month but no day </li></ul>
  61. 61. Date input types <ul><li><input id=&quot;dtstart&quot; name=&quot;dtstart&quot; type=&quot;date&quot; > </li></ul>
  62. 62. Cross-browser forms <ul><li>http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/ </li></ul>
  63. 63. Current State of HTML5 Forms <ul><li>wufoo.com/html5/ </li></ul>
  64. 64. Links and Resources <ul><li>HTML5 Document Outliner gsnedders.html5.org/outliner/ </li></ul><ul><li>ARIA Roles 101 webteacher.ws/2010/10/14/aria-roles-101/ </li></ul><ul><li>HTML5 Accessibility html5accessibility.com/ </li></ul><ul><li>HTML5 Demos html5demos.com/ </li></ul><ul><li>HTML5 validator validator.nu </li></ul>
  65. 65. More links and resources <ul><li>HMTL5, ARIA roles, and screen readers in March 2011 </li></ul><ul><li>www.accessibleculture.org/research/html5-aria-2011/ </li></ul><ul><li>HTML5 Shortcomings rebuildingtheweb.com/en/html5-shortcomings/ </li></ul>
  66. 66. This presentation <ul><li>The web page: http://vdebolt.com/accessu/ </li></ul><ul><li>The slides: http://www.slideshare.net/vdebolt </li></ul>

×