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

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

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

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

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

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 | Facebook.com/YahooAccessibility

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

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

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

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

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 | Facebook.com/YahooAccessibility

Support for Tags Most browsers will treat them as inline. Use display:block Firefox 4 = IAccessible2 Internet Explorer needs JS document.createElement("header") Safe to mix with ARIA Good: Bad: Yahoo! Accessibility Lab Accessibility.Yahoo.Com | Facebook.com/YahooAccessibility

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

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 | Facebook.com/YahooAccessibility

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 | Facebook.com/YahooAccessibility

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

ARIA Quick Fixes Yahoo! Accessibility Lab Accessibility.Yahoo.Com | Facebook.com/YahooAccessibility

New Concerns Concerned Colobus: Some rights reserved by Timmy Toucan

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 | Facebook.com/YahooAccessibility

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 | Facebook.com/YahooAccessibility

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 | Facebook.com/YahooAccessibility

ARIA Longdesc Replace longdesc with aria-describedby Yahoo! Accessibility Lab Accessibility.Yahoo.Com | Facebook.com/YahooAccessibility <img src="foo.jpg"... aria-describedby="dHustler"> Image Description

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 | Facebook.com/YahooAccessibility

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 | Facebook.com/YahooAccessibility

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

Moving Forward

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

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

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?

Questions? Question mark in Esbjerg Some rights reserved by alexanderdrachmann