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.

1. HTML5 Accessibility Ted Drake, Yahoo! Accessibility Lab Slideshare.net/7mary4

2. Evolution of HTML Accessibility What’s new in HTML5 What will we do differently What’s been improved New HTML5 Challenges ARIA: Introduction & Applications

3. What is HTML5? Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

4. a reality check Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

5. HTML5 is not... Finished Difficult Fully Supported Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

6. HTML5 includes More powerful forms CSS3 Canvas and SVG Audio and Video JavaScript tools Device Integration Semantic structure WAI-ARIA Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

7. Good Stuff Native Interactions Enhanced Form Elements Better Semantic Structure ARIA Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

8. Native Support Browsers replace plugins and JavaScript Consistency Extensible Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

9. Super Forms Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

10. No More ‘Divitis’ Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

11. Semantic Tags New containers: article, section, aside, footer, header, nav New & improved tags: dl, time, hgroup, mark Shift from document to modular design: multiple h1, header, footer tags Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

12. Support for Tags Most browsers will treat them as inline. Use display:block Firefox 4 = IAccessible2 Internet Explorer needs JS<script>document.createElement("header")</script> Safe to mix with ARIA Good: <nav role=”navigation”>Bad: <nav><ul role=“navigation”> Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

13. New Attributes Custom data attribute: data-ticker=”yhoo” Timestamps: datetime=”2011-03-16” ARIA: aria-required, aria-isinvalid Drag & Drop: draggable=”true” dropEffect=”move” dropEffect=”copy” Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

14. New JavaScript Tools Offline usage with local storage Better performance Web Workers Web Sockets Geolocation for mapping and location specific information Future: Camera, compass, more? Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

15. ARIA Announces expected behavior of module Toolbar, tabset, menu, application Developer still creates interaction JS Landmark structure: navigation, banner, search, main Meta information: aria-required, aria-label Live regions for dynamic content Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

16. ARIA Landmarks Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

17. ARIA Quick Fixes <a href=”#” role=”button”> <input aria-label=”enter search term” ...> <img aria-describedby=”stockinfo” ...> <table role=”presentation”> <input aria-required=“true” aria-isinvalid=“true”> Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

18. New Concerns Concerned Colobus: Some rights reserved by Timmy Toucan

19. Canvas Blank canvas for JavaScript to draw upon Problems: Text within canvas is not accessible Images within canvas have no alt text User interactions lack roles, states, and properties Avoid canvas for navigation and text-dependent modules SVG is better, but not great Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

20. Closed Captioning Flash wasn’t great, but at least it supported closed captioned videos Multiple caption formats JavaScript can track video events, timing to create custom Closed Captioning Separate audio track for audio descriptions Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

21. longdesc The longdesc attribute is deprecated in the HTML5 spec This is not final HTML5 is backwards compatible. It should still work. ARIA could be used in the future, but it’s not a substitute Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

22. ARIA Longdesc Replace longdesc with aria-describedby <imgsrc="foo.jpg" ... aria-describedby="dHustler"> <a href="hustler.html" id="dHustler"> Image Description </a> Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

23. Alternate Text No alternate text for video poster No alternate text for images in Canvas The alt attribute may become optional Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

24. Headers Module hierarchy, not headers. Each section and article can have an h1 Pages may have no h2,h3,h4... Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

25. Autoplay & Autofocus Built in support for auto behaviors Video autoplay Form input autofucus Native support avoids adhoc JavaScript Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

26. Moving Forward

27. Great Mobile Support Android and iOS offer outstanding support for HTML5, ARIA, and CSS3

28. HTML5 on mobile New form inputs trigger custom keyboard layouts on phone New tags allow cleaner markup, fewer DOM nodes, and faster performance CSS3 replaces images Local storage allows airplane mode usage CSS3 animation is faster than JavaScript

29. Modernizr Modernizr JavaScript provides HTML5 tag support in older browsers Use progressive enhancement with Modernizr’s function test + declaration Can you require JavaScript on your site?

30. Questions? Question mark in Esbjerg Some rights reserved by alexanderdrachmann