This presentation was given at CSUN 2011, the 26th Annual International Technology & Persons with Disabilities Conference. It's an overview of where HTML5 came from, what it includes, how it helps accessibility, and where it can cause problems for accessibility.
Ted Drake, Yahoo! Accessibility Lab
Logo is the new HTML5 icon with American Sign Language:
- What is HTML5?
- Does it help or hurt?
In the good ol' days...
We had text
[image of Yahoo! home page, circa 1997]
Original internet pages were text based and accessible.
Images were introduced and pages were still easy to read.
Then came design
[image of Geocities 1996 a tribute to Geocities web designs on CSS Zen Garden]
Animated gifs, clashing colors, flashing images, and more
Creating Killer Web Sites released in 1997 by David Siegel introduces the spacer gif, table-based layout, and so much more
[image of zeldman.com circa 2001]
Jeffrey Zeldman and friends introduce web standards
Return to semantic, structural markup where design and interactions are separated from markup.
[cartoon by DanCentury has monster holding a can of AJAX asking for Web 2.0 to save his web site]
Web 2.0 introduced application-like web sites.
AJAX for dynamic content changes, drag and drop interfaces, semantic elements transform into forms
elements no longer behave naturally.
Take a deep breath...
[image of a stop sign in San Diego]
What is HTML5?
A reality check
HTML5 is the result of recognizing web sites were moving from documents to web applications.
Initial spec written by WHATWG
Combine best of XHTML with HTML
Enthusiasts began lumping the various elements under the HTML5 moniker
HTML5 is not...
- Fully Supported
The spec is still accepting feedback.
Browser implementation is increasing.
Older IE browsers need JS shim for CSS support of new elements
Backwards compatibility actually makes HTML5 easier to use than HTML4 + XHTML
- More powerful forms
- Canvas and SVG
- Audio and Video
- Device Integration
- Semantic structure
XForms became HTML5 forms
CSS3 has been under development for years, browsers are rapidly adopting it.
Canvas and SVG are not new, browser support is allowing them to replace flash
Audio and Video specs are still developing.
- Native Interactions
- Enhanced Form Elements
- Better Semantic Structure
browsers handle interactions natively, no need for JS
improved form structure
consistent interactions across the web as browsers replace adhoc js and plugins
browsers provide hooks for extending experience via CSS and JS
[video of HTML5 form interaction]
New input types: email, url, date, number...
New attributes: placeholder, autofocus, required...
Combine with ARIA: aria-require...
No more 'divitis'
the generic div and span tags have been abused. HTML5 introduces new semantic containers to avoid a page filled with nothing but divs.
- 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
ARIA and new elements can be combined for fallback.
Avoid wrapping element in a div with the same role, <div role=navigation> <nav>
Dive Into HTML5: New Elements
time also uses datetime and optional pubdate attributes for expanding publish date in machine readable timestamp.
- Custom data attribute: data-ticker=yhoo
- Timestamps: datetime=2011-03-16
- Drag & Drop:
the data-foo pattern avoids placing related information in hidden divs, rel/rev/title attributes.
HTML5 Doctor: Microdata - similar to microformats, uses itemtype, itemprop, itemscope
add pubdate to the time tag to show this was a published event <time datetime= pubdate>
Native drag and drop, integrate with aria HTML5 Doctor: Native Drag and Drop
- Web application functionality
- Landmark structure: navigation, banner, search, main
- Meta information: aria-required, aria-label
- Live regions for dynamic content
[screenshot of Yahoo! home page with landmarks outlined]
role=banner | role=search | role=main | role=complementary
ARIA Quick Fixes
- <a href=# role=button>
- <input aria-label=enter search term ...>
- <img src="foo.jpg" aria-describedby=stockinfo ...>
- <table role=presentation>
Use role=button on links that trigger an action, not take the user to a new page
aria-label for adding a label to an input that has no label.
aria-describedby is similar to longdesc. points to a section of content with id
role=presentation on layout table tells the screen reader its not for data.
- Text within canvas is not accessible
- Images within canvas have no alt text
- User interactions lack roles, states, and properties
- Flash wasnt great, but at least it supported closed captioned videos
- Multiple caption formats
- See John Foliot for details [photo of John Foliot]
Wednesday, March 16, 1:50 PM?Video Accessibility in User Agents - Panel
Thursday, March 17, 10:40 AM ?HTML 5 Accessibility - Panel
photo of John Foliot by Dirk Ginader
- HTML5 spec deprecates the longdesc attribute
- This is not final
- HTML5 is backwards compatible. It should still work, but will be invalid.
Replace longdesc with aria-describedby
[image of antique sign with Hustler written on it]
<a id="dHustler" href="hustler.html">
- Module hierarchy, not headers.
- Each section and article can have an h1
- Pages may have no h2,h3,h4...
autoplay and autofocus
- Built in support for auto behaviors
- Video and Audio autoplay
- Form input autofucus
Making them easier to use, makes it easier to abuse.
Native handling should allow users to cancel these behaviors on all web sites.
- Built in support for auto behaviors
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
- 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 Whats 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
[logo for Yahoo! Accessibility Lab]
[logo for HTML5 with braille text]