1 / 30

HTML5 Accessibility

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?.

wei
Download Presentation

HTML5 Accessibility

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 Accessibility Ted Drake, Yahoo! Accessibility Lab Slideshare.net/7mary4

  2. Evolution of HTML Accessibility • What’s new in HTML5 • What will we do differently • What’s been improved • New HTML5 Challenges • ARIA: Introduction & Applications

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

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

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

  6. 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

  7. Good Stuff • Native Interactions • Enhanced Form Elements • Better Semantic Structure • ARIA Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

  8. Native Support • Browsers replace plugins and JavaScript • Consistency • Extensible Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

  9. Super Forms Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

  10. No More ‘Divitis’ Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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

  16. ARIA Landmarks Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

  17. 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

  18. New Concerns Concerned Colobus: Some rights reserved by Timmy Toucan

  19. 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

  20. 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

  21. 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

  22. 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

  23. 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

  24. 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

  25. 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

  26. Moving Forward

  27. Great Mobile Support Android and iOS offer outstanding support for HTML5, ARIA, and CSS3

  28. 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

  29. 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?

  30. Questions? Question mark in Esbjerg Some rights reserved by alexanderdrachmann

More Related