Suggestions regarding Image Editor Keyboard Accessibility

Jonathan Hung jhung at ocad.ca
Thu Aug 11 15:05:16 UTC 2011


To follow up this email, some thought needs to be put into how keyboard
interaction will mix with mouse actions.

Example:
- what happens if the user is in keyboard "move" mode for a handle and the
user clicks with the mouse on another handle or elsewhere on the canvas?

Myself, I often use both keyboard and mouse when interacting with a
graphical editor... so resolving some of these issues will be interesting.

-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 10:48 AM, Jonathan Hung <jhung at ocad.ca> wrote:

> 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/b82a6a8b/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/b82a6a8b/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/b82a6a8b/attachment-0003.png>


More information about the fluid-work mailing list