Keyboard Accessibility Plugin Demo Idea #1 - Picture matching game

[Jonathan Hung]

Hi everyone,

After some discussions in the fluid-work IRC channel and with colleagues at
the IDRC office, I will be coming up with a new design for the keyboard
plugin. As interesting and novel as a matching game (or any game) would be,
it may introduce unnecessary complexity to a demo whose purpose is to
clearly convey what is being demonstrated and how it can be used.

The new design I am working on now is an image gallery viewer - there is a
large viewing area and below that a filmstrip containing image thumbnails.
The user can use the keyboard plugin to navigate to the thumbnail strip,
choose an image to view, then navigate back to the main viewer and rank the
image.

I hope to have this new design out by this afternoon EST.

- Jonathan.

---
Jonathan Hung / jhung at ocad.ca <jhung.utoronto at gmail.com>
IDRC - Interaction Designer / Researcher
Tel: (416) 977-6000 x3959
Fax: (416) 977-9844



On Tue, Oct 12, 2010 at 4:27 PM, Jonathan Hung <jhung at ocad.ca> wrote:

> 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/20101015/b3fdbe45/attachment.htm>