]
.footnote[**That's a an actual ```<canvas>``` element.**]
---
# 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
---
class: title, center, middle
# Accessibility
---
# 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
```html
// 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.
```javascript
function drawFocus( elem ){
elem.focus();
ctx.drawFocusIfNeeded( elem );
}
```
---
class: small
# Let's play!
* This game only works in [Firefox Nightly 32.0a1](http://nightly.mozilla.org/) (2014-05-30) *with* ```canvas.focusrings.enabled``` and ```canvas.hitregions.enabled``` set to **true**
* It is currently short on features (Game Over, Play again, grid and speed adjustments, etc.)
* Only limited testing with speech and magnification (works with NVDA screenreader, MAGic and ZoomText)
.center[
## [Play Game](whac.html)
]
.footnote[.blue[This is normally where the live demo would happen. If you are not having success in your environment, or don't have a screen reader or screen magnication software installed, feel free to watch the videos on the following slides.]]
---
class: very-small
# Accessible Canvas Game Demo