html 5 & accessibility
DESCRIPTION
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.TRANSCRIPT
HTML5 AccessibilityTed Drake, Yahoo! Accessibility LabSlideshare.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 LandmarksYahoo! 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• Replace longdesc with aria-describedby
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
<img src="foo.jpg" ... aria-describedby="dHustler"><a href="hustler.html" id="dHustler"> Image Description</a>
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
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 EsbjergSome rights reserved by alexanderdrachmann