Paul Kinlan
Google Developer Day 2011

Making Your Web Apps Accessible Using HTML5 and ChromeVox

Case Study: Add to Circles Widget

Accessibility on the Web

Also known as "a11y"

Target audience:
Users with assistive technology

Introducing ChromeVox

Screen reader introduction

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

Overview

  1. Building blocks of accessible Web Apps
  2. Next steps: custom interactive controls
  3. Tools & Resources

Building Blocks

Starting from Scratch - the DOM

DOM Best Practices

Example

The plain in rain stays mainly in the Spain
    <blockquote>
    The <span>plain</span><span>in</span><span>rain</span>
    <span>stays mainly in the </span><span>Spain</span>
    </blockquote>

Interactive Controls

Interactive Controls

Custom button - Live Coding Example

Custom button - Correct Example

Labeling - Label Your Controls and Images!

Labeling - Live Coding Example

Labeling - Correct Example

Manage focus.

Pop-up dialog - Live Coding Example

Pop-up dialog - Correct Example

Keyboard Shortcuts

Next Steps

Working with Custom Interactive Controls

Div Soup

Add To Circles Image Add To Circles Image

<div class="addToCircles_widget">
  <span class="label">Add to circles</span>
</div>
<!-- The entire rest of the DOM is here -->
<div class="addToCircles_dropdown">
    <div>1</div><div class="check"></div><span>Friends</span>
    <div>2</div><div class="check"></div><span>Family</span>
    <div>0</div><div class="check"></div><span>Acquaintances</span>
    <div>2</div><div class="check"></div><span>Following</span>
    <div class="createNew">Create new circle</div>
</div>

Manage focus.

Show the keyboard some love

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

The Add to Circles Widget

Add To Circles widget image

The Add to Circles Dropdown

Circle Picker Menu

Add ARIA for screen readers

ARIA Roles

ARIA States and Properties

<div tabindex="0" role="checkbox" aria-checked="true">

ARIA and the Add to Circles Widget

Add To Circles widget image Circle Picker Menu

Recap

An Accessible Web App:

Tools & Resources

ChromeVox [http://goo.gl/y6Cfk]

ChromeShades [http://goo.gl/BXQU2]

Some no-cost screen readers:

Some libraries with accessibility support:

Final thoughts

Presentation Code

google-axs-chrome.googlecode.com

ChromeVox Discussion List

axs-chrome-discuss@google.com

Google's Accessibility Site

google.com/accessibility