HTML5 Accessibility Challenges

This post originally appeared on the Yahoo Accessibility Blog.

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.

Slide Transcript

  1. HTML5 Accessibility

    Ted Drake, Yahoo! Accessibility Lab
    Logo is the new HTML5 icon with American Sign Language:

  2. Big Questions

    1. What is HTML5?
    2. Does it help or hurt?
  3. HTML5 logo with American Sign Language

    In the good ol' days...

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

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

  6. Salvation arrived

    [image of circa 2001]

    Jeffrey Zeldman and friends introduce web standards
    Return to semantic, structural markup where design and interactions are separated from markup.

  7. "Design" returned

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

  8. Take a deep breath...

    [image of a stop sign in San Diego]

  9. What is HTML5?

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

  11. HTML5 is not...

    • Finished
    • Difficult
    • 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

  12. HTML5 Includes

    • More powerful forms
    • CSS3
    • Canvas and SVG
    • Audio and Video
    • JavaScript tools
    • Device Integration
    • Semantic structure
    • WAI-ARIA

    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.
    JavaScript enhanced with web workers, sockets, local storage, browser API

  13. Good Stuff

    • Native Interactions
    • Enhanced Form Elements
    • Better Semantic Structure
    • ARIA

    browsers handle interactions natively, no need for JS
    improved form structure
    new tags

  14. Native support

    • Browsers replace plugins and JavaScript
    • Consistency
    • Extensible

    consistent interactions across the web as browsers replace adhoc js and plugins
    browsers provide hooks for extending experience via CSS and JS

  15. Super Forms

    [video of HTML5 form interaction]
    New input types: email, url, date, number...
    New attributes: placeholder, autofocus, required...
    Combine with ARIA: aria-require...
    Backwards compatible

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

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

    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.

  18. New Attributes

    • Custom data attribute: data-ticker=”yhoo”
    • Timestamps: datetime=”2011-03-16”
    • Drag & Drop:
      • draggable=”true”
      • dropEffect=”move”
      • dropEffect=”copy”

    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

  19. ARIA

    • Web application functionality
    • Landmark structure: navigation, banner, search, main
    • Meta information: aria-required, aria-label
    • Live regions for dynamic content

    W3C Web Accessibility Initiative: Accessible Rich Internet Applications
    Todd’s lecture: Yahoo! Mail: An Accessible Hub for Your Connected Life Wednesday March 16 10:40 - 11:40

  20. ARIA Landmarks

    [screenshot of Yahoo! home page with landmarks outlined]

    role=”banner” | role=”search” | role=”main” | role=”complementary”

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

  22. New Concerns

  23. Canvas

    Blank canvas for JavaScript to draw upon


    • Text within canvas is not accessible
    • Images within canvas have no alt text
    • User interactions lack roles, states, and properties

    W3C SVG accessibility

  24. Closed Captioning

    • Flash wasn’t 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

  25. longdesc

    • HTML5 spec deprecates the longdesc attribute
    • This is not final
    • HTML5 is backwards compatible. It should still work, but will be invalid.
  26. ARIA longdesc

    Replace longdesc with aria-describedby
    [image of antique sign with Hustler written on it]

    <img alt=""/>
    <a id="dHustler" href="hustler.html">
    Image Description

    JAWS announces the description

  27. Headers

    • Module hierarchy, not headers.
    • Each section and article can have an h1
    • Pages may have no h2,h3,h4...
  28. autoplay and autofocus

    • Built in support for auto behaviors
      • Video and Audio autoplay
      • Form input autofucus
    • Native support avoids adhoc JavaScript

    Making them easier to use, makes it easier to abuse.
    Native handling should allow users to cancel these behaviors on all web sites.

  29. 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
  30. 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
  31. Ted Drake

    Yahoo! Accessibility Lab
    [logo for Yahoo! Accessibility Lab]
    [logo for HTML5 with braille text]