HTML5 Accessibility | CSUN 2011

HTML5 Accessibility Ted Drake Yahoo! Accessibility Lab

Big Questions 1.What is HTML5? 2.Does it help or hurt?Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

In the good ol’ days...Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

We had textYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

Then came designYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

Salvation ArrivedYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

“Design” returnedSome rights reserved by DanCentury on Flickr

Take a deep breathYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

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

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

HTML5 is not...• Finished• Difﬁcult• Fully Supported Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

HTML5 includes• More powerful forms • JavaScript tools• CSS3 • Device Integration• Canvas and SVG • Semantic structure• Audio and Video • 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 FormsYahoo! 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

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

ARIA• Web application functionality• 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> Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

New ConcernsYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

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 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• See John Foliot for details Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

longdesc• HTML5 spec deprecates the longdesc attribute• This is not ﬁnal• HTML5 is backwards compatible. It should still work. Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

ARIA Longdesc Replace longdesc with aria-describedby<img src="foo.jpg" ... aria-describedby="dHustler"><a href="hustler.html" id="dHustler"> Image Description</a> 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

What you can do• Participate in HTML5 speciﬁcations• Begin using HTML5 Form elements• Combine ARIA with HTML5 tags• Start using HTML5 and test, test, test Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

More Talks• Wednesday, March 16, 10:40 AM WEB-2033 Accessible HTML5 Media Players, Captions, Audio Description, and Search• Wednesday, March 16, 10:40 AM Building Fully Accessible Social Software and Rich Web Applications with WAI-ARIA• Wednesday, March 16, 1:50 PM Video Accessibility in User Agents - Panel• Thursday, March 17, 10:40 AM HTML 5 Accessibility - Panel• Thursday, March 17, 1:50 PM WEB-3065 HTML5 – What’s new for Accessibility • Friday, March 18, 1:50 PM WEB-2063 Web Media Accessibility with HTML5• Friday, March 18, 1:50 PM HTML 5 and Flash – An Accessibility Comparison Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

Ted DrakeYahoo! Accessibility Lab Accessibility.Yahoo.Com

http://yaccessibilityblog.com	1383
http://www.yaccessibilityblog.com	11
http://www.twylah.com	4
http://lanyrd.com	3
http://www.slideshare.net	1
http://webcache.googleusercontent.com	1
http://translate.googleusercontent.com	1

HTML5 Accessibility | CSUN 2011

by Ted Drake on Mar 16, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 1,404

Statistics

HTML5 Accessibility | CSUN 2011 — Presentation Transcript