Agenda

1. Introductions
2. Accessibility Challenges of HTML5 <canvas>
3. Past, Present (and Future...) Solutions
4. Designing an accessible game using HTML5 <canvas>

Introductions

Mark Sadecki (@cptvitamin)

• World Wide Web Consortium (W3C)
  • Web Accessibility Initiative (WAI)
• Staff Contact
  • HTML Accessibility Task Force
  • Canvas Sub Group
  • Media Sub Group *
  • Bug Triage *

* Looking for recruits (contact mark@w3.org)

What is <canvas>?

• Appeared in OS X in 2004
• Appeared in WHAT WG spec in 2006

Fallback Content

• Solution has been around since @2010
• Well supported by browsers and AT
• Was an HTML5 solution, not a <canvas> one

Challenges

• I'm NOT a game designer
• The game needs to use all of these new features...
• ...that were implemented a few weeks ago
• The game needs to showcase the accessibility benefits of these new features
• I only have one week to design/build/test (in free time)

This will be no "Call of Duty"

Guiding Principles

Game should be:

• Useable by keyboard users
• Useable by screen reader users
• Useable by screen magnification users
• Equally challenging for all

Whac-a-mole

• Easy enough
• Simple concept
• Should allow me to showcase new features and satisfy all my guiding principles

Deviations from Whac-a-mole

• There will be two characters rather than one
  • One is bad and should be "Whacked" (+10 points)
  • The other is good and should not be "Whacked" (-10 points)
• Fixed number of opportunities to score (10)
• We're not whacking moles here
  • My daughter suggested characters from her favorite video game, Minecraft
  • I agreed since they would be relatively easy to draw using <canvas>
  • We chose "Creepers" (bad) and "Steve" (good)
• Game will be called "Whac a creeper, not a Steve"

Game play

• Player moves focus to, and then activates Start button
• Characters randomly appear on the board, pausing between each
• Player either clicks or hits "Enter" key on Creepers to score 10 points
• Game ends when 10 Creepers have appeared on the board

The Board

<canvas id="game" width="150" height="200">
  <p id="status" tabindex="0" aria-live="assertive">Start</p>
  <p id="00"></p>
  <p id="01"></p>
  <p id="02"></p>
  <p id="10"></p>
  <p id="11"></p>
  <p id="12"></p>
  <p id="20"></p>
  <p id="21"></p>
  <p id="22"></p>
  <p id="oob" tabindex="0">Out of Bounds!</p>
</canvas>
<p aria-live="polite">Score: <span id="score">0</span></p>

Draw the character

• Game starts
• A random character is drawn in one of 9 grids
• A transparent hit region is drawn over the character and associated with corresponding fallback element
• That element is made focusable (tabindex=0)
• That element's text content is updated with the name of that character (for screen reader users)
• Focus is moved to a neutral location (next tab will move focus to character)

Drawing the character

Drawing squares in <canvas> is easy

// draw a 5px by 5px square
ctx.beginPath();
ctx.fillStyle = color;
ctx.rect(x, y, 5, 5);
ctx.fill();

// color grid for creeper, loop over to draw character
var creeper = [
["#7D9C79", "#008000", "#348828", ... "#366B36"],
["#599A4C", "#7D9C79", "#62A853", ... "#789776"],
["#008000", "#292929", "#2B2B2B", ... "#366B36"],
["#348828", "#2D2D2D", "#000000", ... "#93939C"],
...
["#789776", "#7D9C79", "#4A4A4A", ... "#62A853"],
];

Steve!

Player takes action (or not)

• Player clicks on character or
• Uses Tab key to move focus to that character and press the Enter key
• If player is using a screenreader, the name of the character will be read aloud when focus is moved to it
• Score is calculated and updated
• If player does not take action, the game times out and the board is refreshed

Hit Regions

• Each time a character is drawn on the grid, a transparent square is drawn over the character.
• A Hit Region associates that square with the corresponding <p>
• Accessibility APIs are informed of the location of that region as if it were the location of the fallback element
• The player's screen will move to that location if the player is using magnification software

Hit Region Script

// draw a button and assign a Hit Region to it
function drawButton( id ) {
  ctx.beginPath();
  ctx.fillStyle = "green";
  ctx.rect( 0, 0, 100, 30 );
  ctx.fill();
  ctx.addHitRegion(
    { id: id,
      control: document.getElementById(id)
    });
}

drawFocusIfNeeded(element)

Whenever a focus change event occurs, the drawFocusIfNeeded() method is invoked and an indicator, consistent with the default focus indicator for the browser and operating system is drawn on the canvas.

• Focus change events
  • Mouse click on a Hit Region
  • Tab press
  • Clear grid/Reset board

Draw Focus Script

I called this function whenever I drew a path to the Canvas that was associated with a fallback element and I wanted to move focus to it.

function drawFocus( elem ){
  elem.focus();
  ctx.drawFocusIfNeeded( elem );
}