Downloaded 53 times
![HTML5 shim HTML5 shim is a JavaScript that helps IE versions before IE9 to recognize and style HTML5 elements. <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->](https://image.slidesharecdn.com/html5-accessibility-110513082808-phpapp02/85/Html5-accessibility-51-320.jpg)
More Related Content
![[Access U 2010] HTML5 & Accessibility](https://cdn.slidesharecdn.com/ss_thumbnails/accessuhtml5andaccessibilityv2-100511152310-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Html5 accessibility
- 1. HTML5 and AccessibilityJohn Slatin AccessU 2011 Virginia DeBolt, presenter www.webteacher.ws
- 2. Theory and PracticeSatisfy your curiosity about what HTML5 is and isn't Learn HTML5 you can use now and what isn't ready yet Frequent lab breaks to put HTML5 into practice
- 3. A Brief Historyof HTML5 W3C published HTML 4.01 in 1999 W3C next published XHTML 1.0 and XHTML 1.1 W3C started on XHTML 2 Opera, Mozilla, Apple wanted to head toward web apps instead Arguments, disagreements, rejections, faceoffs . . . enter WHATWG WHATWG, separate from W3C, worked on Web Forms and Web Apps which combined and grew into HTML5
- 4. A Brief Historyof HTML5, 2 W3C decided XHTML 2 was a bad idea, dumped it in 2009 W3C chartered new HTML Working Group, based on the work done in the WHATWG While W3C is now working on HTML5, the WHATWG continues. WHATWG creates specs W3C reviews and seeks comments It's messy, but it's working
- 5. A Brief Historyof HTML5, 3 HTML5 should become "candidate recommendation" in 2012 – it's now a working draft HTML5 is not more accessible (yet) We can start using it in small steps
- 6. Goals and PrinciplesSupport existing content Codify what works Support users over authors Keep it simple, eg. DOCTYPE Charset Link Script Power to support web apps Support web forms
- 7. Problematic Areas It'sa working draft under constant change Not more accessible than previous specs – yet There's some confusion over alt text The heading structure for HTML5 is not useful in assistive devices - yet Work is ongoing to make some elements such as canvas accessible, but is incomplete Audio and video aren't accessible - yet
- 8. Alt text 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.
- 9. Try the SimplifiedJoy <!DOCTYPE html> <meta charset="UTF-8"> <script src="file.js></script> <link rel="stylesheet" href="file.css">
- 10. Syntax Uppercase, lowercase,camel case: check Attributes quoted, attributes not quoted: check Self-closing or not: check No deprecated elements, only obsolete elements – don't use 'em, but they work: check
- 11. Oh, the Joy:Syntax <IMG src="image.gif"> <img src=image.gif /> <img src="image.gif"> <img SRC=image.gif>
- 12. Reworked & NotObsolete <small> now means small print or legalese <b> now means to be stylistically offset from normal prose without conveying any extra importance. <strong> still means importance <i> now means an alternate voice or mood. <em> still means emphasis. <em> elements can be nested to indicate strong emphasis. <cite> now means the title of a work but not a person's name
- 13. Restored or acknowledgediframe targets are now restored Value attributes in list items to indicate start number or item number are restored Embed is acknowledged and understood
- 14. Try the Joy<!DOCTYPE html> <html lang="en"> <head> <title>Try the Joy</title> <meta charset="UTF-8"> </head> <body> </body> </html>
- 15. Try the Joy<body> <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>
- 16. New Rich MediaElements <canvas> <video> <audio>
- 17. New Semantic SectioningElements are a Giant Step Forward <section> <header> <hgroup> <footer> <aside> <nav> <article>
- 18. New Form FeaturesNew attributes placeholder autofocus required autocomplete New input types search email website phone range number dates and times color
- 19. Sectioning semantically Atypical web page layout Previously done with divs How would it be done with HTML5 semantic elements?
- 20. A high levellook
- 21. header articles, sections,footers and asides can have header elements hgroup elements can be used when more than one heading element is needed Every header on the page can have an h1 headers can contain nav elements <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> </header>
- 22. The a elementIn HTML5 you can wrap multiple elements in a single <a> element <a href="about.html"> <h2>About Us</h2> <p>Find out how to contact us.</p> </a>
- 23. Try the Joy<header> <nav> <ul><li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li></ul> </nav> <a href="trythejoy.html"><img src="logo.jpg" alt="try the joy"></a> <hgroup> <h1>Try the Joy</h1> <h2>Coding a Page in HTML5</h2> </hgroup> </header>
- 24. ARIA Roles Allbrowsers don't know HTML5, but ARIA can help article columnheader definition directory document group heading img list ARIA roles can describe document structure listitem math note presentation region row rowheader separator toolbar
- 25. ARIA Roles ARIAroles can be navigational landmarks application banner complementary contentinfo form main navigation search
- 26. Support for ARIARoles According to the Paciello Group , Landmark roles are currently supported In JAWS version 10 screen reader , NVDA 2010.1 and VoiceOver on iPhone IOS4. The current version of Window Eyes screen reader has bugs related to the use of ARIA. According to Jared Smith at WebAIM , "some things cannot be made accessible without ARIA."
- 27. Give a Listenwith YouTube How screen readers speak a simple HTML5 page when ARIA roles were added http://www.youtube.com/watch?v=LP3zLrOjQSY&feature=player_embedded
- 28. Try the Joy<header id="banner" role="banner" > <nav id="globalnav" role="navigation" > <ul><li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li></ul> </nav> <a href="trythejoy.html"><img src="logo.jpg" alt="try the joy"></a> <hgroup role="heading"> <h1>Try the Joy</h1> <h2>Coding a Page in HTML5</h2> </hgroup> </header>
- 29. Try the JoySome 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. <nav role="navigation"> <div class="nav" > <ul><li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li></ul> </div> </nav>
- 30. Semantics and RolesWhen 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
- 31. Sections and ArticlesSections can contain articles Articles can contain sections
- 32. Section The sectionelement 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.
- 33. Article The articleelement is more a singular, discrete piece than can be lifted whole for syndication or use elsewhere. Articles can contain header, footer, section, nav, aside and other elements.
- 34.
- 35. Section <section> <article>FirstArticle</article> <article>Second Article</article> </section>
- 36. Section <section id="maincontent" role="main" > <article>First Article</article> <article>Second Article</article> </section>
- 37. Section <section> <h3>Elementchanges 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> </section>
- 38. Article Recap Articlesare meant to be complete units–something you can pick up and move around Articles can contain header, hgroup, section, aside, footer and other elements
- 39. Article Joy <articleclass="feature"> <header role="heading"> <h1>An Example Article</h1> </header> <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. </p>
- 40. Article Joy, 2<figure><img src="cup_cat.jpg" alt="A tiny cat in a teacup"><br> <figcaption>A tiny cat in a teacup</figcaption></figure> <p>You can insert tables, video, links, lists, etc. Just add content as usual.</p>
- 41. Article Joy, 3<footer class="featurefooter"> <p><a href="commentpage.html">Leave a comment.</a><br> © copyright 2010. Published Date xxxx.</p> <p class="vcard">Written by <a class="url fn" href="http://vdebolt.com">Virginia DeBolt</a></p> </footer> </article>
- 42. Add more Copyand paste the first article to create another one or two that are similar. Moving on to the aside: The aside element is tangentially related content 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. Put one in the footer.
- 43. Try the joy:aside <p class="vcard">Written by <a class="url fn" href="http://vdebolt.com">Virginia DeBolt</a></p> <aside class="aboutauthor"> <h3>About the Author</h3> <p>Virginia DeBolt is the author of blah and blah. She blogs at blah and is a big blah.</p> </aside> </footer> </article>
- 44. Try the joy:aside <aside class="aboutauthor" role="complementary" > <h3>About the Author</h3> <p>Virginia DeBolt is the author of blah and blah. She blogs at blah and is a big blah.</p> </aside>
- 45. The Aside asSidebar
- 46. Try the joy<aside id="sidebar"> Wrap that existing section about element changes in HTML5 in this aside. </aside>
- 47. Try the joy<aside id="sidebar" role="complementary" > Wrap that existing section about element changes in HTML5 in this aside. </aside>
- 48. Try the joy<aside id="sidebar" role="complementary"> <section class="related"> <h3>Read related articles</h3> <nav id="relatednav" role="navigation"> <ul> <li><a href="#">context link 1</a></li> <li><a href="#">context link 2</a></li> <li><a href="#">context link 3</a></li> <li><a href="#">context link 4</a></li> </ul> </nav> </section> </aside>
- 49. Footer Footers canbe used with sections and articles Footers can be used in the traditional sense to contain site information at the end of a page
- 50. Try the footer<footer id="pagefoot" role="contentinfo"> 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. </footer>
- 51. HTML5 shim HTML5shim is a JavaScript that helps IE versions before IE9 to recognize and style HTML5 elements. <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
- 52. HTML5 Forms NewAttributes Placeholder Autofocus Required Autocomplete list New Elements Datalist New Input Types Search Email url Tel Range Number Date Color
- 53. What to dowith forms? Look at some code examples Wait for improvements in implementation and accessibility before using most of them
- 54. Attributes <input id="fname"name="fname" type="text" placeholder ="First Name"> You can add: <input id="fname" name="fname" type="text" placeholder="First Name" autofocus > You can add: <input id="fname" name="fname" type="text" placeholder="First Name" autofocus required >
- 55. The autocomplete attributeUses "on" or "off" values. "On" is the default. <form action="runscript.php" autocomplete="off" > <input id="fname" name="fname" type="text" placeholder="First Name" autocomplete="off" >
- 56. Datalist element Usingthe list attribute, you can associate options with an input field. <input type="text" name="writer" id="writer" list="writers"> < datalist id="writers"> <option value="Dr. Seuss"> <option value="Mickey Spillane"> <option value="Mother Goose"> <option value="Phillip Roth"> </ datalist >
- 57. Search input typeIf the search input type is implemented in the browser, the input field will look like a search field. <input id="query" name"query" type="search" >
- 58. More input types<input type="email" name="email" id="email"> <input type="url" name="website" id="website"> <input type="tel" name="phone" id="phone">
- 59. More input typesSliders <input id="amount" name="amount" type="range" min="1" max="5"> Spinners <input id="total" name="total" type="number" min="5" max="20">
- 60. Date and TimeInput Types date: year, month, day datetime: year, month, day with hours, minutes, and seconds and timezone datetime-local: no timezone time: hours, minutes, seconds month: year and month but no day
- 61. Date input types<input id="dtstart" name="dtstart" type="date" >
- 62.
- 63. Current State ofHTML5 Forms wufoo.com/html5/
- 64. Links and ResourcesHTML5 Document Outliner gsnedders.html5.org/outliner/ ARIA Roles 101 webteacher.ws/2010/10/14/aria-roles-101/ HTML5 Accessibility html5accessibility.com/ HTML5 Demos html5demos.com/ HTML5 validator validator.nu
- 65. More links andresources HMTL5, ARIA roles, and screen readers in March 2011 www.accessibleculture.org/research/html5-aria-2011/ HTML5 Shortcomings rebuildingtheweb.com/en/html5-shortcomings/
- 66. This presentation Theweb page: http://vdebolt.com/accessu/ The slides: http://www.slideshare.net/vdebolt
Editor's Notes
- #4 Web Hypertext Application Technology Working Group or WHATWG Lead by Ian Hickson
- #5 W3C working group also lead by Ian Hickson
- #6 HTML5 must go through two complete implementations before becoming a &quot;proposed recommendation.&quot; That's projected to happen in 2022, But browsers have already started supporting many features HTML5. And browser implementation is what really counts in terms of what web designers can do now. So far, new HTML5 features don't make the web more accessible. Some features like longdesc have been dropped and the use of alt text has been muddied and confused. Headings are now an accessibility issue.
- #7 From the start, the WHATWG worked under several principles The web app APIs are the most experimental part of HTML5. I'm not going to talk about them beyond saying that any web app you make may break at any time because the specs are changing rapidly. Similarly, web forms have a lot of promise but they aren't implemented well yet.
- #8 Problems and all, HTML5 is now in use in many places and it is being pushed by Google, Apple and other big players. Browsers are implementing parts of it.
- #9 This is a page to study, there are many examples there for just about every situation.
- #10 Charset no http-equiv=&quot;content-type&quot; content=&quot;text/html&quot; Script no type=&quot;text/javascript&quot; link no type=&quot;text/css To start using HTML5 today, all you have to do is change your DOCTYPE. HTML5 supports existing content, which means that it's backwards compatible.
- #11 Part of backwards compatibility Obsolete: frame, frameset, noframes, acronym, font, big, center, strike If you want to support XML, you can write HTML5 with the same rigor that you used to write XHTML and it will work
- #12 I think a practice that includes rigorous, well-formed syntax is the best idea, but it's now a matter of personal preference.
- #13 These new definitions of old tags that were presentational give them a semantic underpinning for the first time, which means they are more accessible.
- #15 Actually, you don't really need the head and body tags in HTML5. They are considered to be understood in an HTML5 document and a page without them will actually validate. Personally, I choose to err on the side or rigor in the code, so that's what I'll be showing you here. Just be aware that you can get by with less and still be writing valid HTML5.
- #17 Of these, audio is fairly useable right now. Video requires fall back content in several different file formats such as ogg or swf. Canvas draws with JavaScript. Canvas currently has accessibility issues, even though every browser except IE8 and below support canvas.
- #18 These new elements are the most useful right now, the easiest to make accessible, and the ones we'll concentrate on in building a page together today. Two other helpful new semantic elements that don't fall into the sectioning content area are figure and figcaption
- #19 These are not implemented well cross browser yet, but some have promise in terms of usability and accessibility. They aren't ready to use yet.
- #20 .This is a good place to start using HTML5. You can try out the new semantic sectioning elements. We'll build a page using these new elements to see how it works. We'll look at it in visual browsers, where things often work. That doesn't mean they would work the same way in assistive devices.
- #21 It's more complicated than this, but you can see how the layout could be built. The area I have marked as an aside could also logically be a section instead. Aside means content that is tangentially related, so you would decide which to use based on your particular content. Right now, most AT devices don't distinguish between these new semantic elements and the familiar DIV. You can see the specifics for each one at HTML5accessibility.com. This website also has a workarounds page, listing ways to make HTML5 accessible right now. A major way is ARIA roles.
- #22 Only the first heading in an hgroup element appears in the document outline using the new HTML5 outlining model. I have a link to a site that will outline your HTML5 documents for you. The fact that h1 elements can be used multiple times on a page is counter intuitive to everything we've known so far. It's a big change. Hgroup has been in and out of the spec. There's discussion about it right now which should be concluded by May 22, 2011. We'll act as if it's in, but it may not end up being in. See http://html5doctor.com/the-hgroup-hokey-cokey
- #23 Browsers can't display this properly yet, so we'll modify it, but it's in the current spec like this.
- #25 Accessible Rich Internet Applications Suite (ARIA), defines a way to make Web content and Web applications more accessible. It is used to improve the accessibility of dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. ARIA roles work now in many browsers and screen readers. When they don’t, they are harmless. If you build a page as accessibly as you can and then add ARIA roles into it where possible, you increase the potential accessibility of the page. It isn't perfect yet, but it does help in some cases.
- #26 Adding ARIA roles to the HTML5 semantic structural elements adds needed accessibility.
- #29 You can also add IDs for CSS purposes. Banner can only be used once per page. In theory, you should be able to wrap the anchor tag around both the logo image and the h1, but that doesn't display right in any browsers I tested yet, so I'm showing it to you this way.
- #30 Writers like Jeremy Keith and Tantek Celik are suggesting that bulletproof HTML5 for current implementation and styling should use nested divs with a class name that matches the element name. I'm not going to show it to you that way today, but feel free to try it that way or to include examples of it in your individual work.
- #31 For example, ARIA landmark roles make navigation on AT much easier. So even when the HTML5 elements are recognized, ARIA still adds value. Window Eyes, according to HTML5accessibility.com has issues with some landmark roles with some HTML5 semantic elements.
- #32 People are a little unsure about their footing with articles and sections, it's one of the parts of HTML5 that seems confusing.
- #33 Essentially, this is replacing a lot of what we did with divs.
- #34 If you think of a blog post as an article, it could contain a header, some content divided into sections with headings, some nav areas for permalinks or comments, the comments might be asides or sections. Taken all together the article is something that you could use as a single piece.
- #35 Furthermore, each article might have sections. The aside might have sections. To get the visual display to style, I wrapped the whole layout in a div with the id=wrapper
- #36 The bare bones of the structure.
- #37 Add the ARIA role. You can also add ID or class identifiers for CSS and JavaScript hooks.
- #38 Eventually this will be a section in the aside. Go ahead and mark it up as a section, but keep it out of the way for now.
- #40 Since articles will be used frequently, it's a good idea to assign them to a class.
- #41 Alt text: lots of drama around whether alt text should be dropped completely or retained. It's been retained, but there is now a 40 page document explaining when to use it. Basically it is still there to do what it's always done, explain an image for those who can't see it or say nothing if the image is merely decorative. However, there are cases when the image is explained in the new figcaption and the alt text is not needed. Sometimes the image is explained in a title attribute, and there may not be a need for alt text then. My advice is to evaluate the need for good alt text on a case by case basis.
- #42 An article footer could contain all sorts of things, these are just examples.
- #44 The h3 in the aside could be in a header element. You would probably want to assign a class to the aside for styling purposes. The current wisdom is that if you only have one heading element, as in this aside, there is no need to wrap it in a <header> element. When you add a secondary heading or other material to the <header>, then the <header> wrapper becomes needed.
- #45 Don't forget the ARIA role.
- #46 I hope you've gotten the idea from the previous exercise that as aside is not necessarily a sidebar, although it can be. Let's move on to that next. Depending on how you wanted to lay out the page, you might want to insert the source material for the aside before the maincontent as I did in the example that is styled.
- #47 Give it an ID
- #48 Include the ARIA role.
- #49 You can add additional sections, a nav area, articles, etc. What do you not see in this example that could be included? (heading element)
- #50 Let's build one of those traditional footers.
- #51 Since the page footer will be a unique footer on the page, you can give it an ID. The ARIA role 'contentinfo' can only be used once on a page and indicates the section of the page where information about the page is contained: legal notices, copyright information, etc. It's become a trend recently to put all sorts of things in the footer and build out a big footer with lots of peripheral information. That might be more appropriate in an aside that sits above the footer if you are using role=&quot;contentinfo&quot; with the page footer
- #52 Insert that script into the document head
- #53 The only visual browser that comes close to displaying most of these is Opera. They are the least ready for prime time of everything we've looked at today. Even so, they have to most potential to improve accessibility – so we'll look at building them although we won't see much in the browser. Most require the addition of ARIA and additional widgets like those listed at http://www.html5accessibility.com/index-aria.html So far noone supports color, so I won't show it to you.
- #55 The Placeholder text appears in the field. When someone clicks in the field, it disappears. The autofocus, new in HTML5, attribute replaces the scripted focus used now. With required, new in HTML5, the browser will check to be sure required fields are filled out.
- #56 Browsers will autocomplete by default. You can turn off autocomplete for an entire form using the value &quot;off&quot; in the form element. You can disable autocomplete for individual form elements.
- #57 When datalist displays in the browser, you can type in a value that isn't on the list.
- #58 If the browser doesn't understand this, it simply displays a normal input text field. With a label, it's perfectly useful right now.
- #59 These are especially helpful in mobile devices, where the on screen board is different depending on the type attribute. For example the keyboard for an email address would include the @ sign, the keyboard for a phone number would be a number display, and the keyboard for a url would include the forward slash and a .com button.
- #62 Browsers that don't support the date input type will display a regular text input. You would have to ask users to enter the date manually. Of course there are many existing JavaScript widgets that do this, which might be a better way to go until all the browsers implement the date input type.
- #63 Here's a tutorial about building cross-browser forms that uses scripted support from Webforms2 , Modernizr , jQuery UI Even when you go to all that trouble to use HTML5 forms, that doesn't necessarily mean they will be more accessible in AT devices.
- #64 This web site also has tables for the new input types and other new form elements as well as information about JavaScripts and CSS with HTML5 forms. In the resources section, there is a link to http://www.accessibleculture.org/research/html5-aria-2011/ HTML5, ARIA Roles, and Screen Readers in March 2011 | Research | Accessible Culture