HTML 5 & Accessibility


Published on

With HTML5, the web is evolving from a browser/document-based experience to a desktop-like application accessed on multiple devices. What does HTML5 mean for Web accessibility? Is accessibility compromised or enhanced with this new standard? This session will review promising new features in HTML5 that promote accessibility and discuss possible challenges ahead and advice for ensuring HTML5 accessibility.

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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Logo is the new HTML5 icon with Braille:
  • How can we use HTML5 and ARIA
  • Impact of dom nodes on performance: performance vs. images mode:
  • Modernizr: must go in the head of the document for IE to register the new tags.YUI3 wrapper service for modernizr:
  • HTML 5 & Accessibility

    1. 1. HTML5 Accessibility<br />Ted Drake, Yahoo! Accessibility Lab<br /><br />
    2. 2. Evolution of HTML Accessibility<br />What’s new in HTML5<br />What will we do differently<br />What’s been improved<br />New HTML5 Challenges<br />ARIA: Introduction & Applications<br />
    3. 3. What is HTML5?<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    4. 4. a reality check<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    5. 5. HTML5 is not...<br />Finished<br />Difficult<br />Fully Supported<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    6. 6. HTML5 includes<br />More powerful forms<br />CSS3<br />Canvas and SVG<br />Audio and Video<br />JavaScript tools<br />Device Integration<br />Semantic structure<br />WAI-ARIA<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    7. 7. Good Stuff <br />Native Interactions<br />Enhanced Form Elements<br />Better Semantic Structure<br />ARIA<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    8. 8. Native Support<br />Browsers replace plugins and JavaScript<br />Consistency<br />Extensible<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    9. 9. Super Forms<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    10. 10. No More ‘Divitis’<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    11. 11. Semantic Tags<br />New containers: article, section, aside, footer, header, nav<br />New & improved tags: dl, time, hgroup, mark<br />Shift from document to modular design: multiple h1, header, footer tags<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    12. 12. Support for Tags<br />Most browsers will treat them as inline. Use display:block<br />Firefox 4 = IAccessible2<br />Internet Explorer needs JS<script>document.createElement("header")</script><br />Safe to mix with ARIA Good: <nav role=”navigation”>Bad: <nav><ul role=“navigation”><br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    13. 13. New Attributes<br />Custom data attribute: data-ticker=”yhoo” <br />Timestamps: datetime=”2011-03-16”<br />ARIA: aria-required, aria-isinvalid<br />Drag & Drop: <br />draggable=”true”<br />dropEffect=”move”<br />dropEffect=”copy”<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    14. 14. New JavaScript Tools<br />Offline usage with local storage<br />Better performance<br />Web Workers<br />Web Sockets<br />Geolocation for mapping and location specific information<br />Future: Camera, compass, more?<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    15. 15. ARIA<br />Announces expected behavior of module<br />Toolbar, tabset, menu, application<br />Developer still creates interaction JS<br />Landmark structure: navigation, banner, search, main<br />Meta information: aria-required, aria-label<br />Live regions for dynamic content<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    16. 16. ARIA Landmarks<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    17. 17. ARIA Quick Fixes<br /><a href=”#” role=”button”><br /><input aria-label=”enter search term” ...><br /><img aria-describedby=”stockinfo” ...><br /><table role=”presentation”><br /><input aria-required=“true” aria-isinvalid=“true”><br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    18. 18. New Concerns<br />Concerned Colobus: Some rights reserved by Timmy Toucan<br />
    19. 19. Canvas<br />Blank canvas for JavaScript to draw upon<br />Problems:<br />Text within canvas is not accessible<br />Images within canvas have no alt text<br />User interactions lack roles, states, and properties<br />Avoid canvas for navigation and text-dependent modules<br />SVG is better, but not great<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    20. 20. Closed Captioning<br />Flash wasn’t great, but at least it supported closed captioned videos<br />Multiple caption formats<br />JavaScript can track video events, timing to create custom Closed Captioning<br />Separate audio track for audio descriptions<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    21. 21. longdesc<br />The longdesc attribute is deprecated in the HTML5 spec<br />This is not final<br />HTML5 is backwards compatible. It should still work.<br />ARIA could be used in the future, but it’s not a substitute<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    22. 22. ARIA Longdesc<br />Replace longdesc with aria-describedby<br /><imgsrc="foo.jpg" ... <br /> aria-describedby="dHustler"><br /><a href="hustler.html" id="dHustler"><br /> Image Description<br /></a><br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    23. 23. Alternate Text<br />No alternate text for video poster<br />No alternate text for images in Canvas<br />The alt attribute may become optional<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    24. 24. Headers<br />Module hierarchy, not headers.<br />Each section and article can have an h1<br />Pages may have no h2,h3,h4...<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    25. 25. Autoplay & Autofocus<br />Built in support for auto behaviors<br />Video autoplay<br />Form input autofucus<br />Native support avoids adhoc JavaScript<br />Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess |<br />
    26. 26. Moving Forward<br />
    27. 27. Great Mobile Support<br />Android and iOS offer outstanding support for HTML5, ARIA, and CSS3<br />
    28. 28. HTML5 on mobile<br />New form inputs trigger custom keyboard layouts on phone<br />New tags allow cleaner markup, fewer DOM nodes, and faster performance<br />CSS3 replaces images <br />Local storage allows airplane mode usage<br />CSS3 animation is faster than JavaScript<br />
    29. 29. Modernizr<br />Modernizr JavaScript provides HTML5 tag support in older browsers<br />Use progressive enhancement with Modernizr’s function test + declaration<br />Can you require JavaScript on your site?<br />
    30. 30. Questions?<br />Question mark in Esbjerg<br />Some rights reserved by alexanderdrachmann<br />