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)
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 good ol’ 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
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. 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. 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
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 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. 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
Logo is the new HTML5 icon with braille: http://www.flickr.com/photos/draket/5449654430/\n
\n
\n
Original internet pages were text based and accessible.\nImages were introduced and pages were still easy to read.\nYahoo! circa 197\n
“Geocities 1996” a tribute to Geocities web designs on CSS Zen Garden\nanimated gifs, clashing colors, flashing images, and more\n“Creating Killer Web Sites” released in 1997 by David Siegel introduces the spacer gif, table-based layout, and so much more\n
Jeffrey Zeldman and friends introduce web standards\nReturn to semantic, structural markup.\ndesign and interactions are separated from markup.\n
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
\n
\n
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
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
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
browsers handle interactions natively, no need for JS\nimproved form structure\nnew tags\n\n
consistent interactions across the web as browsers replace adhoc js and plugins\nbrowsers provide hooks for extending experience via CSS and JS\n
New input types: email, url, date, number...\n New attributes: placeholder, autofocus, required...\n Combine with ARIA: aria-require...\n Backwards compatible\n\n
the generic div and span tags have been abused. HTML5 introduces new semantic containers to avoid a page filled with nothing but divs.\n
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
<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
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
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
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
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
\n
\n
\n
\n
\n
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