Keyboard Accessibility Plugin Demo Idea #1 - Picture matching game

[Jonathan Hung]

Hi everyone,

I am working on a new demo for the keyboard accessibility plugin component.
Previously we have used this component to demonstrate how UI mechanisms like
menus and tabs can be made keyboard accessible, but I thought about taking
the opportunity of trying something different.

The demo uses the popular picture matching game where the player takes turns
revealing two cards at a time. To demonstrate the capability of the keyboard
accessibility plugin, the user can:

- Navigate between different areas of the demo (the instructions, the game
board, score, and restart game button) by using the Tab key.
- Examine the contents of an area by pressing Enter.
- If the game board has focus, then navigate between game "cards" items
using the cursor keys.
- Finally, activate an item to reveal its picture (with relevant Alt text of
course ;).

The attached image is an initial sketch of the keyboard interaction as it
would appear visually. It isn't perfect or 100% correct, so please don't
read too deeply as this is just intended to solicit initial impressions and
feedback.

Thinking further ahead, the semantic markup would be very interesting for
this game as items are initially one value, then revealed to be another
value when activated, and then both items reverted back to the initial
values. I think this could be a worthwhile exercise to puzzle through and
would welcome any thoughts on how one would implement this in ARIA and HTML.

Comments welcome!

- Jonathan.

---
Jonathan Hung / jhung at ocad.ca <jhung.utoronto at gmail.com>
IDRC - Interaction Designer / Researcher
Fax: (416) 977-9844
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20101012/3049a5e6/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: keyboard-a11y.png
Type: image/png
Size: 666586 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20101012/3049a5e6/attachment.png>