Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 Accessibility | CSUN 2011

5,892 views

Published on

What is HTML5 and how does it affect accessibility? This presentation was given at the 26th Annual International Technology & Persons with Disabilities Conference (CSUN 2011)

Published in: Technology
  • Be the first to comment

HTML5 Accessibility | CSUN 2011

  1. 1. HTML5 Accessibility Ted Drake Yahoo! Accessibility Lab
  2. 2. Big Questions 1.What is HTML5? 2.Does it help or hurt?Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  3. 3. In the good ol’ days...Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  4. 4. We had textYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  5. 5. Then came designYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  6. 6. Salvation ArrivedYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  7. 7. “Design” returnedSome rights reserved by DanCentury on Flickr
  8. 8. Take a deep breathYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  9. 9. What is HTML5?Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  10. 10. a reality checkYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  11. 11. HTML5 is not...• Finished• Difficult• Fully Supported Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  12. 12. 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
  13. 13. Good Stuff• Native Interactions• Enhanced Form Elements• Better Semantic Structure• ARIA Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  14. 14. Native Support• Browsers replace plugins and JavaScript• Consistency• Extensible Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  15. 15. Super FormsYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  16. 16. Super FormsYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  17. 17. No More ‘Divitis’Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. ARIA LandmarksYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  22. 22. 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
  23. 23. New ConcernsYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  24. 24. 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
  25. 25. 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
  26. 26. longdesc• HTML5 spec deprecates the longdesc attribute• This is not final• HTML5 is backwards compatible. It should still work. Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. What you can do• Participate in HTML5 specifications• 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
  31. 31. 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
  32. 32. Ted DrakeYahoo! Accessibility Lab Accessibility.Yahoo.Com

×