+Mike West

Making Your Web Apps Accessible Using HTML5 and ChromeVox

https://mkw.st/+, @mikewest, https://mikewest.org/

Circle Picker Circle Picker after hover.

Target audience:
Users with assistive technology

Introducing ChromeVox

Screen reader introduction

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

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>

DOM Best Practices

Interactive Controls

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

Interactive Controls

Custom button - Live Coding Example

Labeling - Label Your Controls and Images!

Labeling - Live Coding Example

Manage focus.

Pop-up dialog - Live Coding Example

Keyboard Shortcuts

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)
      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
<div class="addToCircles_widget" tabindex="0" role="button">
  <span class="label" >Add to circles</span></div>
<div class="circlePicker" role="dialog">
<div class="check" role="checkbox" aria-checked="false">

Recap

An Accessible Web App:

Tools & Resources

ChromeVox

ChromeShades

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