Silvia Pfeiffer and Alice Boxhall

Making Your Web Apps Accessible Using HTML5 and ChromeVox


Case Study: YouTube Player Controls

Accessibility on the Web

Target audience:
Users with assistive technology

How many users does this affect?

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


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

Building Blocks

Starting from Scratch - the DOM



The plain in rain stays mainly in the Spain
    The <span>plain</span><span>in</span><span>rain</span>
    <span>stays mainly in the </span><span>Spain</span>
    #plain {
        position: relative;
        left: 430px;
    #rain {
        position: relative;
        left: -100px;

DOM Best Practices

DOM Best Practices



Colourless green ideas sleep furiously.

Main content

The quick brown fox jumps over the lazy dog. Now is the time for all good men to come to the aid of the party.


ChromeShades screenshot

Interactive Controls

Custom Button - Live Coding Example

Labelling - Inaccessible Example

Labelling - Accessible Example

Manage focus

Pop-up dialog - Inaccessible Example

Pop-up dialog - Accessible Example

Keyboard Shortcuts

Practical Accessibility for
Custom Controls

Working with Custom Interactive Controls

Custom Widget: Pull-Up Menu

YouTube pull-up menu YouTube menu button

Mouse-Based Code: Pull-Up Menu

Manage focus

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

The Pull-Up Button Example

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

Code: Pull-Up Button with keyboard control

The Pull-Up Menu

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

Keyboard-accessible Pull-Up Menu

Add ARIA for screen readers

ARIA Roles

ARIA States and Properties

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

ARIA and the Pull-Up Menu Widget

Final Code: Pull-Up Menu with ARIA


To develop an Accessible Web App:

Tools & Resources



Some no-cost screen readers:

Some libraries with accessibility support:

Final thoughts

Presentation Code

ChromeVox Discussion List

Google's Accessibility Site