Suggestions regarding Image Editor Keyboard Accessibility

Jonathan Hung jhung at ocad.ca
Thu Aug 11 14:48:50 UTC 2011


Hi Pulkit,

I had an opportunity to play around with the Image Editor on a local server
and it looks really great! Good work.

Traditionally in a webpage / portal design the follow keyboard navigation
works well. I'm providing this here as background information on a
traditional interaction:
- Tab key changes focus between top-level items
- Shift+Tab would put focus to the previous top-level focusable item
- Enter key changes focus to the first focusable item inside the currently
focused object
- Once inside a 2nd level object, arrow keys are used to move between items.

Joseph Scheuhammer has had some experience implementing this, perhaps he can
provide some insight. I've CC'ed him on this email.

For the Image Editor, keyboard access similar to the Fluid Infusion Image
Reorderer may work nicely (
http://build.fluidproject.org/infusion/demos/reorderer/imageReorderer/html/imageReorderer.html).
You will want to resize the Image Reorderer window so the images are
arranged 3x2 grid to see how this may work.

Essentially:
- Tab key moves focus around top level items including the crop bounding
box.
- Enter key puts focus on the top-left drag handle
- Arrow key moves focus between drag handles (up and down keys puts focus on
the drag handle immediately below the current selected handle).
- While holding CTRL, pressing an Arrow key would begin a "drag" action.
- Releasing CTRL will conclude a drag action.
- Similarly, if focus is on the crop bounding box (not on a handle), holding
CTRL+arrow keys will move the crop bounding box around the canvas. Although,
I can see this particular interaction not requiring the CTRL modifier - but
I think it's good to keep the keyboard interactions for "moving something"
consistent.


An alternative to the CTRL+Arrow key interaction is to use the Enter key as
a move mode "on and off" when a drag handle is selected:
- Tab key moves focus around top level items including the crop bounding
box.
- Enter key puts focus on the top-left drag handle
- Arrow key moves focus between drag handles (up and down keys puts focus on
the drag handle immediately below the current selected handle).
- Pressing Enter key while a drag handle is selected puts the drag handle in
"move mode".
- Pressing an Arrow key would move the drag handle.
- Pressing Enter key again would conclude "move mode" and the originally
selected handle remains selected.
- Similarly, if focus is on the crop bounding box (not on a handle), Enter
key will move the crop bounding box in and out of move mode.

This alternative interaction may actually be desirable because it doesn't
require the user to hold down two keys simultaneously - thus reducing motor
skill requirement and overall user error.

As a side note, ESC key should be used cautiously because it's already
pretty overloaded - the browser uses this, as well as several assistive
technologies use it (i.e. some screen readers use it to stop voice
playback).


Anyone else have any thoughts? Anyone care to refine these keyboard
interactions?

- Jon.

---
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 Thu, Aug 11, 2011 at 5:31 AM, Pulkit Goyal <pulkit110 at gmail.com> wrote:

> Hi everybody,
>
> I have implemented the key board accessibility feature for the CropperUI
> component. For now, it works as follows:
>
> When the user starts cropping, he is presented with a bounding box inside
> the canvas. The canvas is tabbable. The user can use tab to select the
> canvas and then activate it. After activation, the user can use the tab key
> to switch between different resize handles of the bounding box and then
> resize them using the keyboard arrow keys. The following screen shots should
> make it more clear:
>
> [image: image.png]
> [image: image.png]
>
>
> The question that arises here is, since the tab key is used for switching
> between the selection handles (after the canvas is activated), the user
> can't tab to other components on the screen using keyboard. I haven't been
> able to decide on which solution would the best for this? Would it be better
> to have some other key to switch between the selection handles? Or is it
> better to have a special key (e.g. escape) to shift the focus out of canvas
> and switch back to original keyboard handlers?
>
> I look forward to hearing suggestions about the keyboard accessibility. I
> am open to hearing new ideas about additional keyboard shortcuts as well.
>
> Thanks.
>
>  --
> Regards
> Pulkit
>
>
> _______________________________________________________
> fluid-work mailing list - fluid-work at fluidproject.org
> To unsubscribe, change settings or access archives,
> see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20110811/f3f1435a/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image.png
Type: image/png
Size: 538130 bytes
Desc: not available
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20110811/f3f1435a/attachment-0002.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image.png
Type: image/png
Size: 843892 bytes
Desc: not available
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20110811/f3f1435a/attachment-0003.png>


More information about the fluid-work mailing list