300 likes | 485 Views
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?.
E N D
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 | @yahooaccess | Facebook.com/YahooAccessibility
a reality check Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
HTML5 is not... • Finished • Difficult • Fully Supported Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | 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 | @yahooaccess | Facebook.com/YahooAccessibility
Good Stuff • Native Interactions • Enhanced Form Elements • Better Semantic Structure • ARIA Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Native Support • Browsers replace plugins and JavaScript • Consistency • Extensible Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Super Forms Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
No More ‘Divitis’ Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | 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 | @yahooaccess | Facebook.com/YahooAccessibility
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
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
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
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
ARIA Landmarks Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
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
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 | @yahooaccess | 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 | @yahooaccess | 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 | @yahooaccess | Facebook.com/YahooAccessibility
ARIA Longdesc <imgsrc="foo.jpg" ... aria-describedby="dHustler"> <a href="hustler.html" id="dHustler"> Image Description </a> • Replace longdesc with aria-describedby Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
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
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
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
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