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