Making Your Web Apps Accessible Using HTML5 and ChromeVox

Case Study: Add to Circles Widget

Accessibility on the Web

• Accessibility = making your web apps usable by everyone.
• This includes users of assistive technology.
• Assistive technology is software or hardware that
  makes it easier for someone with a disability to use
  the Internet.

Target audience:
Users with assistive technology

• Blind users
  with a screen reader that describes
  the page using synthesized speech
  or braille output.
• Low-vision users
  who use large fonts or a screen magnifier.
• Motor-impaired users
  who can’t use a mouse and may use
  a special keyboard or voice-control interface.

Introducing ChromeVox

• My team at Google has built a screen reader
  called ChromeVox.
• ChromeVox is a screen reader designed for the web.
• You control it using keyboard shortcuts.
• It speaks the contents of a webpage using the Chrome Text-To-Speech API.

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:

Overview

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

Building Blocks

Starting from Scratch - the DOM

• Visually impaired users see only the DOM.
• Keyboard-only users navigate the page in DOM order.
• So the DOM is the user's mental image of the
  document structure:
  • No left or right, only up and down the DOM.

DOM Best Practices

• Create logical sections of the document to help identify interface elements that are related.
  • HTML5 semantic elements like <nav>, <header>, and <h1> are useful here.
• Make sure parts of controls are grouped together
  in the DOM.
  • For example, the drop-down menu button and the drop-down menu itself.
• Use CSS for layout instead of tables.

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

• Use native HTML tags instead of generic divs or spans.
  • In other words, no Div Soup! No Span Salad!

  <span onclick="">...  ⇒  <a href="">...
  <div onclick="">...   ⇒  <button onclick="">...

• Why?
  • Screen readers can't identify generic divs or spans
    as controls.
  • Generic divs or spans aren't focusable, so they can't be activated with the keyboard.

Interactive Controls

• For modern browsers, there is NO reason not to use native HTML tags.
  • You can style them however you want.
  • They give you focus management and keyboard support for free! Screen readers know how to identify them, users know how to use them.

Custom button - Live Coding Example

<div>Click on this button:
<div class="custombutton" onclick="alert('sent!')">Send</div></div>

Custom button - Correct Example

<div>Click on this button:
<button class="custombutton" onclick="alert('sent!')">Send</button></div>

Labeling - Label Your Controls and Images!

• <label> is perfect for form elements.

  <label for="firstname">First name:</label>
  <input type="text" id="firstname"/>

• All images should have the alt attribute:
  • Important images should have descriptive alt text.

    <img src="chart.png" alt="[description]">

  • Decorative images should have blank alt text.

    <img src="bullet35648.gif" alt="">

Labeling - Live Coding Example

<input type="text" id="user">
<input type="password" id="password">
<img src="../images/901d3n94t3.jpg" />
<br>
<span class="label_left">User Name</span>
<span class="label_right">PIN</span>
<br><button>Send</button>

Labeling - Correct Example

<input type="text" id="user_correct">
<input type="password" id="password_correct">
<img src="../images/901d3n94t3.jpg" alt="Bridge Security Image"/>
<br>
<label for="user_correct" class="label_left">User Name</label>
<label for="password_correct" class="label_right">PIN</label>
<br><button>Send</button>

Manage focus.

• Keyboard-only users navigate by moving focus through the DOM.
• So we should proactively place focus with element.focus() to create an efficient workflow.
• When changing tabs, navigating to an overlay, etc - put focus in an appropriate element in the new view. When that view is closed, return focus to where it was.

Pop-up dialog - Live Coding Example

<script>
function confirm() {
  $('ink_dialog').style.display = 'block';
  $('dialog_live').style.backgroundColor = 'gray';
}
function closeDialog() {
  $('ink_dialog').style.display = 'none';
  $('dialog_live').style.backgroundColor = 'white';
}
</script>

<div id="ink_dialog" class="dialog">
  <p>Are you sure you can afford it?</p>
  <button id="ok" onclick="closeDialog()">OK</button>
  <button id="cancel" onclick="closeDialog()">Cancel</button>
</div>

<button id="confirm" onclick="confirm()">
  Buy More Printer Ink
</button>

Pop-up dialog - Correct Example

<script>
function confirm_correct() {
  $('ink_dialog_correct').style.display = 'block';
  $('ok_correct').focus();
  $('dialog_correct').style.backgroundColor = 'gray';

  var lastFocus = $('ok_correct');
  var listener = function(e) {
    window.setTimeout(function() {
      if (e.target != $('ok_correct') && e.target != $('cancel_correct'))
      {
        lastFocus.focus();
      } else {
        lastFocus = e.target;
      }
    }, 0);
  };
  document.addEventListener('focus', listener, true);
  $('ok_correct').addEventListener('click', function(e) {
      $('ink_dialog_correct').style.display = 'none';
      $('dialog_correct').style.backgroundColor = 'white';
      document.removeEventListener('focus', listener, true);
      $('confirm_correct').focus();
    }, false);

  $('cancel_correct').addEventListener('click', function(e) {
      $('ink_dialog_correct').style.display = 'none';
      $('dialog_correct').style.backgroundColor = 'white';
      document.removeEventListener('focus', listener, true);
      $('confirm_correct').focus();
    }, false);
}

</script>

<div id="ink_dialog_correct" class="dialog" role="dialog">
  <p>Are you sure you can afford it?</p>
  <button id="ok_correct">OK</button>
  <button id="cancel_correct">Cancel</button>
</div>

<button id="confirm_correct" onclick="confirm_correct()">
  Buy More Printer Ink
</button>

Keyboard Shortcuts

• Navigation Shortcuts jump between major
  interactive areas.
  • Prevent excessive tabbing
  • Segment UI into logical units
• Action Shortcuts enable complex actions with a
  few keystrokes.
  • Simplifies workflows
• All shortcuts need to be well-documented to
  ensure discoverability.

Next Steps

Working with Custom Interactive Controls

• We have div soup. Now what?
• We should re-implement all the semantics of a native control on the custom control!
  • Focus management
  • Keyboard support
• We also need to add ARIA roles and states for
  screen readers.

Div Soup

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

• 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. This is useful when hiding
  focusable controls from sighted and keyboard-only users -->
  <div onclick="" tabindex="-1">Clicky 3</div>
  

• Proactively place focus with element.focus()
  to create an efficient workflow.

Show the keyboard some love

• Custom controls should respond to keys like Enter, Space, Arrows, Escape, etc. as appropriate.
  Pick a native control and mimic it!
• The W3C has a good guide to common keyboard patterns.

<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

• The Add to Circles control is most like a button, so we should mimic native button behavior:
  • Make the Add to Circles button keyboard-focusable with tabindex="0"

    <div class="addToCircles_widget" tabindex="0">
      <span class="label" >Add to circles</span></div>
    

  • Allow keydown events like ENTER and SPACE to activate the button and show the dropdown.

The Add to Circles Dropdown

• The Add to Circles Dropdown is most like a modal dialog, so we should implement dialog behavior:
  • When the dialog opens, set focus on the first
    focusable element.

    dialog.$('firstFocusableElt').focus();
    

  • Trap focus inside the dialog.
  • Add ESC as a keyboard shortcut to close the dialog.
  • When the dialog closes, set focus back on the Add to Circles button.

Add ARIA for screen readers

• ARIA attributes provide semantic information to screen readers that is normally conveyed visually.
• Note that using ARIA does not automatically implement the standard widget behavior - you'll still need to add focus management and keyboard navigation yourself.

ARIA Roles

• Use the ARIA role attribute to indicate that a generic tag is playing the role of a standard widget like a button.

  <div tabindex="0" role="button">Send</div>
  

• ARIA roles also indicate composite controls that do not have a native HTML equivalent.

  <div tabindex="0" role="menuitem">Paste</div>
  

• ARIA landmark roles can be used to identify separate areas of your app.

  <section role="search">Search this Site ...</section>
  

ARIA States and Properties

• Use ARIA states to add dynamic information about the current state of an element.
• Remember to update ARIA states in your JavaScript!

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

• The ARIA property aria-live identifies dynamic content on a page.
  • aria-live is added to elements that will be updated and describes the type of updates the element receives.
  • For more information on ARIA live regions, see the W3C Guide to Live Region Properties.

ARIA and the Add to Circles Widget

• Specify that the Add to Circles element is a button.

  <div class="addToCircles_widget" tabindex="0" role="button">
    <span class="label" >Add to circles</span></div>
  

• Specify that the Add to Circles dialog is a dialog.

  <div class="circlePicker" role="dialog">

• Specify that the checkbox divs are...checkboxes.

  <div class="check" role="checkbox" aria-checked="false">

Recap

An Accessible Web App:

• Has the DOM structured in a sensible way.
• Uses native HTML tags instead of div soup.
• Labels all controls and images.
• Implements intuitive focus management.
• Can be used entirely with the keyboard!
• Includes ARIA for screen readers.

• Has custom controls that follow this advice too!

Tools & Resources

ChromeVox

• Built-into Chrome OS, available as an extension for Chrome on other platforms.

ChromeShades

• Accessibility testing tool for developers.
• When ChromeShades is running, everything is reformatted as text-only and organized more like how a blind user would perceive the page with a screen reader.

• Install both from google-axs-chrome.googlecode.com

Some no-cost screen readers:

• VoiceOver
• NVDA

Some libraries with accessibility support:

• Dojo Toolkit
• GWT
• jQuery UI

Final thoughts

• Whether you're building a Web App from scratch or working on refining complex widgets, you can deliver a dynamic accessible experience.
• The first step doesn't require any special tools or expertise: just unplug your mouse.
• HTML5 standards, especially ARIA, get you the rest of the way there.

Presentation Code

ChromeVox Discussion List

Google's Accessibility Site