Making Your Web Apps Accessible Using HTML5 and ChromeVox

Introduction

• Who are we?
• What is the aim of this talk?

Case Study: YouTube Player Controls

Accessibility on the Web

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

Target audience:
Users with assistive technology

• Deaf users
  with captions on videos.
• 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.

How many users does this affect?

Introducing ChromeVox

• The accessibility team at Google has built a screen reader
  called ChromeVox.
• ChromeVox is a screen reader designed for the web.
  • Controlled using keyboard shortcuts.
  • Speaks the contents of a webpage using the Chrome Text-To-Speech API.
• Other screen readers target platforms rather than the Web.

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

• Screen reader and keyboard-only users access the page in DOM order.
  • Things which appear side-by-side to a sighted user may be in vastly different locations in the DOM.

<header> </header> <nav> </nav> <article> </article> <aside> </aside>

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>

    #plain {
        position: relative;
        left: 430px;
    }
    #rain {
        position: relative;
        left: -100px;
    }

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.

DOM Best Practices

• Use CSS for layout instead of tables.

ChromeShades

• ChromeShades is a Chrome extension which styles pages to give you an idea of how the page 'looks' to a screen reader user.

Interactive Controls

• Where possible, use native HTML tags instead of generic divs or spans.

  <span onclick="">... <div onclick="">...

  ⇒

  <a href="">... <button onclick="">...

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

Custom Button - Live Coding Example

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

Labelling - Inaccessible Example

<input type="text" id="user">
<input type="password" id="password">
<input type="checkbox" id="remember">
<br>
<span class="label_left">User Name</span>
<span class="label_middle">PIN</span>
<span class="label_right">Remember me</span>
<br><button>Send</button>

Labelling - Accessible Example

<input type="text" id="user_correct">
<input type="password" id="password_correct">
<input type="checkbox" id="remember_correct">
<br>
<label for="user_correct" class="label_left"> User Name</label>
<label for="password_correct" class="label_middle"> PIN</label>
<label for="remember_correct" class="label_right">Remember me
</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 - Inaccessible 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 - Accessible Example

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

function closeDialog_correct() {
  $('ink_dialog_correct').style.display = 'none';
  $('confirm_correct').focus();
  $('dialog_correct').style.backgroundColor = 'white';
}
</script>

<div id="ink_dialog_correct" class="dialog" role="dialog">
  <p>Are you sure you can afford it?</p>
  <button id="ok_correct" onclick="closeDialog_correct()">OK</button>
  <button id="cancel_correct" onclick="closeDialog_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.

Practical Accessibility for
Custom Controls

Working with Custom Interactive Controls

• We have <div> custom controls. 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.

Custom Widget: Pull-Up Menu

<div title="Speed">
  <span>Normal</span>
</div>
<div id="menu" style="display: none;">
  <ul>
    <li id="id-Double" data-value="Double">Double Speed</li>
    <li id="id-Normal" data-value="Normal">Normal Speed</li>
    <li id="id-Half" data-value="Half">Half Speed</li>
  </ul>
</div>

Mouse-Based Code: Pull-Up Menu

<div class="button" id="button" title="Speed">
  <span>Normal</span>
</div>
<div id="menu" style="display: none;">
  <ul>
    <li id="id-Double" data-value="Double">Double Speed</li>
    <li id="id-Normal" data-value="Normal">Normal Speed</li>
    <li id="id-Half" data-value="Half">Half Speed</li>
  </ul>
</div>
<style>
li:hover {
  background: #691213;
}
</style>
<script>
	var button = document.getElementById("button");
	var menu = document.getElementById("menu");
	var items = menu.getElementsByTagName("li");
	function showMenu(evt) {
	  evt.stopPropagation();
	  menu.style.display = 'block';
	}
	function hideMenu(evt) {
	  evt.stopPropagation();
	  menu.style.display = 'none';
	}
	function changeButtonText(newText) {
	  button.childNodes[1].innerHTML = newText;
	}
	function selectItem(evt) {
	  changeButtonText(evt.target.getAttribute('data-value'));
	}
	document.addEventListener('click', hideMenu, false);
	button.addEventListener('click', showMenu, false);
	for (var i = 0;  i <  items.length; i++) {
	  items[i].addEventListener('click', selectItem, false);
	}
</script>

Manage focus

• Elements that receive focus are read by the screenreader.
• Make custom interactive elements focusable/tab-enabled
  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.

Apply focus to Pull-Up Menu

Apply focus to button: tabindex=0

<div class="button" id="button" title="Speed" tabindex="0">

Allow focus on menu: tabindex=-1

<div id="menu" style="display: none;" tabindex="-1">

Manage focus hand-over with focus()

function showMenu(evt): menu.focus();
function hideMenu(evt): button.focus();

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.

The Pull-Up Button Example

The Pull-Up div control is most like a button:

• Add a keyboard event handler.
• ENTER and SPACE keys show the menu.
• Open menu sets highlight on the active element.

  button.addEventListener('keydown', handleButtonKeys, false);

  function handleButtonKeys(evt) {
    evt.stopPropagation();
    var key = evt.keyCode;
    switch(key) {
      case (13): /* ENTER */
      case (32): /* SPACE */
		var buttonText = button.childNodes[1].innerHTML;
		var actItem = document.getElementById("id-"+ buttonText);
		setSelected(actItem);
		showMenu(evt);
      default:
    }
  }
  function setSelected(elem) {
    elem.setAttribute('selected', true);
  }
	

Code: Pull-Up Button with keyboard control

The Pull-Up Menu

The Pull-Up menu control is most like a list:

• Retain highlight on the selected element: @selected.

  <li id="id-Normal" data-value="Normal" selected="true"></li>

• UP and DOWN arrows move between menu items.

  function getPrevItem(index), function getNextItem(index)

• ENTER and SPACE keys activate a selected menu item.

  menu.addEventListener('keydown', handleMenuKeys, false);

• ESC removes the pull-up menu.

Keyboard-accessible Pull-Up Menu

<style>
*[selected] {
  background: #691213;
}
</style>
<script>
function getSelected() {
  for (var i=0; i < items.length; i++) {
    if (items[i].getAttribute('selected')) {
      return i;
    }
  }
  return 0;
}
function setSelected(elem) {
  var curSelected = getSelected();
  items[curSelected].removeAttribute('selected');
  elem.setAttribute('selected', true);
}
function hideMenu(evt) {
  evt.stopPropagation();
  menu.style.display = 'none';
  items[getSelected()].removeAttribute('selected');
  button.focus();
}
menu.addEventListener('keydown', handleMenuKeys, false);

function handleMenuKeys(evt) {
  evt.stopPropagation();
  var key = evt.keyCode;
  switch(key) {
    case (38): /* UP */
      setSelected(items[getPrevItem(getSelected())]);
      break;
    case (40): /* DOWN */
      setSelected(items[getNextItem(getSelected())]);
      break;
    case (13): /* ENTER */
    case (32): /* SPACE */
      changeButtonText(items[getSelected()].innerHTML);
      hideMenu(evt);
      break;
    case (27): /* ESC */
      hideMenu(evt);
      break;
    default:
  }
}
function getPrevItem(index) {
  var prev = index - 1;
  if (prev < 0) {
    prev = items.length - 1;
  }
  return prev;
}
function getNextItem(index) {
  var next = index + 1;
  if (next == items.length) {
    next = 0;
  }
  return next;
}
</script>

Add ARIA for screen readers

• ARIA = Accessible Rich Internet Applications, W3C standard
• 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,
  • add keyboard navigation,
  • change aria attribute values in script.

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 Pull-Up Menu Widget

• Specify that the Pull-up div is a button, has a popup menu and give it a aria-label.

  <div title="Speed" class="button" id="button" tabindex="0"
  role="button" aria-haspopup ="true" aria-label="Normal Speed">

• Specify that the Pull-up menu is a menu, and which element is active.

  <div class="menu" id="menu" style="display: none;" tabindex="-1"
  role="menu" aria-activedescendant="id-Normal">

• Specify that the Menu items are...menuitems.

  <li id="id-Double" role="menuitem" data-value="Double">Double

• Change aria-label, aria-activedescendant values appropriately in script.

Final Code: Pull-Up Menu with ARIA

<div title="Speed" class="button" id="button" tabindex="0" role="button" aria-haspopup ="true" aria-label="Normal Speed">
  <span>Normal</span>
</div>
<div class="menu" id="menu" style="display: none;" tabindex="-1" role="menu" aria-activedescendant="id-Normal">
  <ul>
    <li id="id-Double" role="menuitem" data-value="Double">Double Speed</li>
    <li id="id-Normal" role="menuitem" data-value="Normal" selected="true">Normal Speed</li>
    <li id="id-Half" role="menuitem" data-value="Half">Half Speed</li>
  </ul>
</div>
<script>
function changeButtonText(newText) {
  button.childNodes[1].innerHTML = newText;
  button.setAttribute('aria-label', newText + " Speed");
}
function setSelected(elem) {
  var curSelected = getSelected();
  items[curSelected].removeAttribute('selected');
  elem.setAttribute('selected', true);
  menu.setAttribute('aria-activedescendant', elem.id);
}
</script>

Recap

To develop an Accessible Web App:

• Make the DOM structured in a sensible way.
• Use native HTML tags instead of div soup.
• Label all controls and images.
• Implement intuitive focus management.
• Make it entirely usable with the keyboard!
• Include ARIA for screen readers.

• Make custom controls 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
• Orca

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