Downloaded 76 times
Uploaded byTed Drake
HTML5 Accessibility | CSUN 2011
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)
![5G Explained! A High Level Overview [Introduction]](https://cdn.slidesharecdn.com/ss_thumbnails/5gexplainedahighleveloverview-260119165306-cc137a3e-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5 Accessibility | CSUN 2011
- 1. HTML5 Accessibility Ted Drake Yahoo! Accessibility Lab
- 2. Big Questions 1.What is HTML5? 2.Does it help or hurt? Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
- 3. In the goodol’ days... Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
- 4. We had text Yahoo!Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
- 5. Then came design Yahoo!Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
- 6. Salvation Arrived Yahoo! AccessibilityLab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
- 7. “Design” returned Some rightsreserved by DanCentury on Flickr
- 8. Take a deepbreath Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
- 9. What is HTML5? Yahoo!Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
- 10. a reality check Yahoo!Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
- 11. HTML5 is not... •Finished • Difficult • Fully Supported Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
- 12. HTML5 includes • Morepowerful 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. Good Stuff • NativeInteractions • Enhanced Form Elements • Better Semantic Structure • ARIA Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
- 14. Native Support • Browsersreplace plugins and JavaScript • Consistency • Extensible Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
- 15. Super Forms Yahoo! AccessibilityLab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
- 16. Super Forms Yahoo! AccessibilityLab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
- 17. No More ‘Divitis’ Yahoo!Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
- 18. Semantic Tags • Newcontainers: 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. New Attributes • Customdata 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. ARIA • Web applicationfunctionality • 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. ARIA Landmarks Yahoo! AccessibilityLab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
- 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. New Concerns Yahoo! AccessibilityLab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
- 24. Canvas • Blank canvasfor 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. Closed Captioning • Flashwasn’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. longdesc • HTML5 specdeprecates 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. 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. 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. 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. What you cando • 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. 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. Ted Drake Yahoo! AccessibilityLab Accessibility.Yahoo.Com
Editor's Notes
- #2 Logo is the new HTML5 icon with braille: http://www.flickr.com/photos/draket/5449654430/\n
- #3 \n
- #4 \n
- #5 Original internet pages were text based and accessible.\nImages were introduced and pages were still easy to read.\nYahoo! circa 197\n
- #6 &#x201C;Geocities 1996&#x201D; a tribute to Geocities web designs on CSS Zen Garden\nanimated gifs, clashing colors, flashing images, and more\n&#x201C;Creating Killer Web Sites&#x201D; released in 1997 by David Siegel introduces the spacer gif, table-based layout, and so much more\n
- #7 Jeffrey Zeldman and friends introduce web standards\nReturn to semantic, structural markup.\ndesign and interactions are separated from markup.\n
- #8 Web 2.0 introduced application-like web sites. \nAJAX for dynamic content changes, drag and drop interfaces, semantic elements transform into forms\nelements no longer behave naturally.\n
- #9 \n
- #10 \n
- #11 HTML5 is the result of recognizing web sites were moving from documents to web applications.\nInitial spec written by WHATWG\nCombine best of XHTML with HTML\nEnthusiasts began lumping the various elements under the HTML5 moniker\n
- #12 The spec is still accepting feedback.\nBrowser implementation is increasing.\nOlder IE browsers need JS shim for CSS support of new elements\nBackwards compatibility actually makes HTML5 easier to use than HTML4 + XHTML\n
- #13 XForms became HTML5 forms\nCSS3 has been under development for years, browsers are rapidly adopting it.\nCanvas and SVG are not new, browser support is allowing them to replace flash\nAudio and Video specs are still devloping. \nJavaScript enhanced with web workers, sockets, local storage, browser api\n
- #14 browsers handle interactions natively, no need for JS\nimproved form structure\nnew tags\n\n
- #15 consistent interactions across the web as browsers replace adhoc js and plugins\nbrowsers provide hooks for extending experience via CSS and JS\n
- #16 New input types: email, url, date, number...\n New attributes: placeholder, autofocus, required...\n Combine with ARIA: aria-require...\n Backwards compatible\n\n
- #17 the generic div and span tags have been abused. HTML5 introduces new semantic containers to avoid a page filled with nothing but divs.\n
- #18 ARIA and new elements can be combined for fallback. Avoid wrapping element in a div with the same role, <div role=&#x201D;navigation&#x201D;><nav>\nhttp://diveintohtml5.org/semantics.html#new-elements\ntime also uses datetime and optional pubdate attributes for expanding publish date in machine readable timestamp.\n
- #19 <script>document.createElement("header")</script>\n\nIAccessible2 is an engineered accessibility interface allowing application developers to leverage their investment in MSAA while also providing an Assistive Technology (AT) access to rich document applications such as the IBM Workplace productivity editors and web browsers such as Firefox. The additional functionality includes support for rich text, tables, spreadsheets, Web 2.0 applications, and other large mainstream applications.\n
- #20 the data-foo pattern avoids placing related information in hidden divs, rel/rev/title attributes.\nhttp://html5doctor.com/microdata/ - similar to microformats, uses itemtype, itemprop, itemscope\nadd pubdate to the time tag to show this was a published event <time datetime=&#x201D;&#x201D; pubdate>\nNative drag and drop, integrate with aria http://html5doctor.com/accessibility-native-drag-and-drop/\n
- #21 W3C Web Accessibility Initiative: Accessible Rich Internet Applications\nTodd&#x2019;s lecture: Yahoo! Mail: An Accessible Hub for Your Connected Life Wednesday March 16 10:40 - 11:40\n\n
- #22 role=&#x201D;banner&#x201D; | role=&#x201D;search&#x201D; | role=&#x201D;main&#x201D; | role=&#x201D;complementary&#x201D;\n\n
- #23 Use role=&#x201D;button&#x201D; on links that trigger an action, not take the user to a new page\naria-label for adding a label to an input that has no label.\naria-describedby is similar to longdesc. points to a section of content with id\nrole=&#x201D;presentation&#x201D; on layout table tells the screen reader its not for data.\n
- #24 \n
- #25 http://www.w3.org/TR/SVG-access/ - SVG accessibility\n
- #26 Wednesday, March 16, 1:50 PMVideo Accessibility in User Agents - Panel\n Thursday, March 17, 10:40 AM HTML 5 Accessibility - Panel\nphoto of John Foliot by Dirk Ginader\n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 Web workers: multi threading\nWeb sockets: comet, push data\nLocal storage: cookies on steroids\nOffline support: gmail without internet\nGeolocation: and other access to computer resources\n
- #33 \n
- #34 \n
- #35 \n