New keyboard accessibility plugin demo - Image Viewer design

[Jonathan Hung]

Hi everyone,

I have created a new design for the keyboard accessibility plugin. This
design is based on an image viewer that has a main viewing area and a film
strip containing thumbnails below it. In addition to implementing the
keyboard plugin, this demo also presents messages to the user in context to
the component that has focus. This is like a tooltip, but is presented
immediately upon focus, and only disappears when focus is removed (unlike a
tooltip that only appears after a delay, and disappears if the user makes an
action).

I have attached an image highlighting most of the keyboard and mouse
interaction of this demo.

Here is the breakdown of the keyboard interaction:

1. The interface is loaded and none of the images have been selected.
2. The user presses tab once and focus moves to the "Keyboard Instructions"
link container. The keyboard instructions immediately appear without any
need for user action.
3. The user presses tab again and focus moves to the image thumbnail
filmstrip. Immediately on focus on this container, instructions appear
letting the user know that pressing Enter will allow them to select an image
to view.
4. The user presses Enter and focus now moves to the first thumbnail in the
filmstrip. With focus now on the first image, instructions appear informing
the user that Space bar will view the image, and Left and Right arrow keys
will move their selection to the next image.
5. If the user presses Space bar, the focused thumbnail will display its
larger version in the main viewer. The thumbnail changes style to indicate
that it is the image being viewed. The instruction text also changes to just
give instructions for left and right arrow keys - the instructions for
pressing Space bar to view the image is removed since it no longer applies.
6. If the user presses Right or Left arrow keys, the focus will move to the
next image. Performing this action will not change the image being viewed or
the "currently in view" style of its associated thumbnail.
7. If focus is in the thumbnail filmstrip and the user presses Tab key, the
focus then moves to the main viewer. Upon focus of the main viewer,
instruction text appears immediately informing the user that Enter key will
allow them to inspect the contents of the viewer.
8. The user presses Enter on the main viewer container, then initial focus
is placed on the larger image contained within. If there is Alt Text
associated with the image, it will be presented visually to the user.
9. The user presses tab and focus now moves from the main image to the
5-Star ranking widget. Upon focus of this container, instructions are
presented to the user letting them know that Left and Right arrow keys will
change their selected ranking.
10. With focus on the 5-star widget, the user can press left to decrease, or
right to increase the ranking. The value selected persists during the demo
session.

Notes on mouse interaction:
Mouse interaction behaves the same way as the keyboard interaction. Whenever
an interesting container gains focus by clicking, an instructional message
appears to let them know what they can do. The only significant addition to
the mouse interaction is the hovering behaviour:

1. User can mouse hover over a thumbnail and it changes style. However,
hovering does not reveal or change any instructional text since hovering
doesn't change focus.
2. The 5-star widget will react if the user is hovering over it. For
example, if the user hovers over the 3rd star, stars 1, 2, and 3 will
activate showing the user the result if they click where they are hovering.

Implementation detail on the 5-star widget:
I have seen an unordered list implementation of the 5-star widget that uses
CSS only and reacts to mouse hovers without any Javascript. The only
Javascript required for the 5-star widget is to keep track of the rank
values for each image during the demo. This way there is some persistence to
the user's rankings in a single session of the demo.


Comments and questions are welcome!

- 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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20101016/e4659263/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Keyboard a11y 2-01.png
Type: image/png
Size: 973720 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20101016/e4659263/attachment.png>