Creating
Accessible Interactive
Web Apps Using HTML5

Dominic Mazzoni and Rachel Shearer
May 11, 2011

Feedback

Please provide feedback on this session at
http://goo.gl/eWAqj

Hashtags

#io2011, #chrome, #a11y (accessibility)

One way to make your web app accessible is:


This is boring! Let’s build a web app that’s:

  • Interactive and Dynamic
  • Feels like a native app
  • ...while still being accessible to users with disabilities!

Target audience:
Users with assistive technology

Overview

  1. What’s a great accessible experience?
  2. Coding accessible HTML5
  3. Extensions, Tools & Resources

Part I: What’s a great accessible experience?

Introducing ChromeVox

  • This presentation is running on a Cr-48 Chrome notebook.
  • Chrome OS includes a built-in screen reader, ChromeVox, a pure-JavaScript Chrome extension developed at Google.
    We'll use this for demos!

Accessibility for the static web

Screen readers and magnifiers allow the user to explore both static text and interactive elements.

Here's an example web form to demonstrate:

Having trouble? Click here for help

HTML5: A bad accessible experience

What went wrong?


What should have happened?

  • Focus should have been trapped inside the dialog
  • Controls should be usable with the keyboard
  • Controls should be labeled for screen readers
  • The user should be informed when things change

HTML5: A good accessible experience

Part II: Coding accessible HTML5

Accessible HTML5 Overview

  1. Use clean HTML and use standard tags whenever possible.
  2. Manage focus.
  3. Add key handlers.
  4. Add ARIA for screen readers.

(Preferably in this order!)

Use clean HTML and standard tags.

Manage focus.

  • Make custom interactive elements focusable with tabindex:
    <!-- Natural tab order -->
    <div onclick="" tabindex="0">Clicky 1</div>
    
    <!-- Custom tab order -->
    <div onclick="" tabindex="7">Clicky 2</div>
    
    <!-- Focusable but not in tab order -->
    <div onclick="" tabindex="-1">Clicky 3</div>
    
  • Proactively place focus with element.focus()
    to create an efficient workflow.

Add key handlers.

<div id="reply_icon"
     tabindex="0"
     onclick="reply()"
     onkeydown="return onReplyKeydown(event)">Reply</div>

<script>
  function onReplyKeydown(event) {
    if (event.keyCode == 32 || event.keyCode == 13)  // Space / Enter
      reply();
  }
</script>

Add ARIA for screen readers.

Identify dynamic content as an ARIA Live Region.

Example 1: Custom button

Example 2: Toggle button

Example 3: Status indicator

Example 4: Star Rating Gadget

Example 5: Pop-up dialog

Compatibility Note

These examples were all designed to work with the latest versions of many browsers and assistive technology!

(Just like with HTML / CSS, there are platform differences and some testing is required.)

Accessible HTML5 Recap

  1. Use clean HTML, standard tags.
  2. Manage focus.
  3. Add key handlers.
  4. Add ARIA for screen readers.

    ARIA is easy if you already did the last three steps!

One last note: Screen readers and key handling

Part III: Extensions, Tools & Resources

Why is developing accessible web apps hard?

(Even for a developer who is aware of the need...)

The power of browser extensions

Google's extensions

ChromeVox

ChromeVis

  • Magnifier for low-vision users.
  • Displays selected text in a high-contrast magnified lens for easy reading.
  • Provides basic keyboard
    commands to move the
    selection around the page.
  • Preserves the original
    page layout.

ChromeShades

Extension source

Final thoughts

Feedback

Please provide feedback on this session at
http://goo.gl/eWAqj

Hashtags

#io2011, #chrome, #a11y (accessibility)

Presentation Code

google-axs-chrome.googlecode.com