[Sigia-l] Summary: Keyboard shortcuts for web based interfaces

[prai at prady.com]

Hi!

Please find all the replies I received on my recent post - "Keyboard
shortcuts for web based interfaces". I received these replies from SIGIA
and CHI-WEB. I am summarizing both the replies to this mail.

Thanks to all those who replied. I would appologize in advance if  I left
any replies. Please let me know.

Pradyot Rai


My Original Post ------------------------------

Has anybody ever done any work on creating shortcuts for web based
interfaces?

I am interested in following -

- pointers which could tell me 'standards', ‘dos/do-nots’, and anything
related to ‘accessibility’ aspect.
- user requirements/ case studies where shortcuts were implemented to help
the user.
- Opinions as per their usability

Replies ---------------------------------------

Stefan Smagula <smag at aya.yale.edu>

Pradyot,

You should look into ACCESSKEY="1", where 1 is any character on the
keyboard.  With this tag, if the user presses alt-1, they'll activate
the  accesskey. It's an HTML tag that few people use and know about.
It's an  attribute of another tag, usually a form or anchor. Sometimes
it acts like  a click, sometimes it just shifts focus--depends on the
context.

there's a budding convention in the world of blogs to use them
consistently-- I think MovableType has spurred this on--and alt-1 is
home,  I believe. I'm specifying accesskeys on a coming web-app at
SBC.com, and I  used alt-1 for home, alt-0 for logout, and then just
used the 2-6 for the  global navigation. It's accessible, but it's also
just good design. Why not  have keyboard shortcuts for power users?

let me know if you find out more, or have questions,

Stefan
-------------------------------------------------
Tanya Rabourn <rabourn at columbia.edu>

Pradyot,

This article might be of interest
http://www.alistapart.com/stories/accesskeys/
and the discussion that follows it
http://www.alistapart.com/stories/accesskeys/discuss/

-tanya
--------------------------------------------------
"Sahala Swenson" <sahala_swenson at whisperwire.com>

Hi,

I used keyboard shortcuts extensively on a financial web application.  The
product was targetted at accountants who were used to using the keyboard
almost exclusively. Also, the product was very DHTML heavy to act very
similar to a desktop application, therefore there was a general
expectation that keyboard support would be available.

Study your intended audience, and keep in mind that keyboard user
interfaces are in the tactile, not visual, department.  It's almost
impossible to test a keyboard interface out using wireframes or 
screenshots.  You'll have to actually build a working prototype for
testing.  For the specific app I worked on there were a lot of seemingly
"odd" keyboard shortcuts that accountants liked that most people would be
a bit baffled at (for instance, they use the numeric keypad almost
exclusively for input).

Best Practices (design):
- Keep the "vocabulary" of keyboard commands small.  Users should not have
to have a printed keyboard chart at their desks.
- Use the built in browser keyboard support as much as possible before
doing any specific keyboard event handling.  Remember that all visible
elements can get keyboard focus through tabbing, and you can set the tab
order.
- Avoid modes (the text editor vi is a wonderful counter-example).
- Affordance: Don't just show a chart of keyboard commands in the help
documentation.  Use tooltips or mnemonics or some other

visible indication of the keyboard shortcut.
- Complex keyboard combos = bad.  There's a reason why CTRL-ALT-DELETE is
the standard reboot/reset on PCs.
- Above all: Do not leave designing/implementing keyboard support till the
every end of the project.  Otherwise it's

sufficiently a pain in the butt that it will not get implemented.

Best Practices (implementation):
- For all but the most trivial things you will have to use
Javascript/DHTML. Tell developers to get used to it.  It's not that hard.
- Global application keyboard shortcuts are a bit difficult to implement in
conjunction with frames (iframes or framesets).  I ended up having to
write a custom event architecture that dispatched keyboard events
throughout all the frames and popups.  Object oriented developers can
refer to the Publisher-Subscriber pattern.
- Cross-browser support.  Not all browsers handle keyboard events the
same.  IE and Mozilla/Netscape have differences in the Event object model,
and this will need to be resolved through some reasonably smart
Javascript.

MSDN has a decent keyboard user interface guidelines document.  It's very
Windows slanted (obviously) and a bit more on the technical side but it's
a good start.  You might check equivalent documentation for other
platforms.

http://msdn.microsoft.com/library/?url=/library/en-us/dnacc/html/ATG_KeyboardShortcuts.asp

Hope this helps.  Good luck.

sahala swenson

--------------------------------------------------
"Gautam Rao" <GRao at UserWorks.com>

Pradyot,

Yahoo Mail has keyboard shortcuts for basic functions (check mail, compose
message, access folders, search messages, access help).  These are
implemented through CTRL + SHIFT keys so that they dont conflict with the
more common CTRL shortcuts.  These work pretty well for me and you can get
some ideas by looking at them.  But I am a regular user of this site. 
Like Jon mentioned, these shortcuts make sense only in websites/web apps
which users use on a frequent (maybe daily?) basis.  If you are an
infrequent user, you are not likely to remember them and your purpose of
having shortcuts is defeated if nobody uses them.

Gautam

Gautam Rao
Senior Usability Specialist
UserWorks, Inc.
--------------------------------------------------
<jon at spin.ie>

The web accessibility community has grown increasingly disillusioned with
accesskey. There is neither any good way of ensuring you don't clash with
shortcuts used by the browser itself, nor for indicating which keys do
what on the page. Shortcuts become increasingly useful as experience with
an application grows, this isn't applicable to many web applications where
users may be "causual" rather than using the same application every day,
and the application itself may be relatively mutable as updates are 
controlled by the administrators, rather than the user.

Since numbers are not much used by browsers for shortcuts they are safer
than letters.

--------------------------------------------------
<ued at ourbrisbane.com>

Pradyot,

Unfortunately (for people with motor and visual disabilities as well as
keyboard-centric users), there is no 'one standard' for <ACCESSKEY>
attributes (i.e. no definitive list to define that, say Alt+H = Home
page).  The UK Government tried implementing a standard, but it's not
generic, and so can oinly be used by UK Government sites:
http://www.britain-info.org/user_info/access_keys.asp

I'm currently looking at delivering a standard for government sites in
Australia that may also be adopted by the general public (common features
such as 'accessibility info', 'home', 'search', 'about', 'skip to
content', skip to primary nav', 'skip to secondary nav', etc...).

Of course, one must also take into consideration keys that should be
'reserved' by other applications (especially user agents (browsers) and
assistive technologies (e.g. screen readers)).  Generally, you're pretty
safe as long as you avoid using letters, and stick with numbers...

Best regards,

Ash Donaldson
User Experience Designer

--------------------------------------------------
Chris MacGregor <chrismacg at yahoo.com>

Pradyot,

keyboard shortcuts are few and far between unfortunately. I did write an
article about it back in 201 that you might find interesting:
http://flazoom.com/news/shortcut_08032001.shtml

CHris


--------------------------------------------------
Robin Jeffries <robin.jeffries at sun.com>

The core problem is that you don't know which ones are 'stolen' by the
browser.  If the user's browser is set to a different language, almost any
shortcut could have a meaning to the browser (which gets to interpret it
first).  We really wanted to use shortcuts for accessibility, but ended up
deciding it was impossible to do right.

Robin

--------------------------------------------------
Cary Evans <cary at matterdaddy.com>

I've implemented these a long time ago... what I remember when I looked
into was be careful about conflicts with browser shortcuts, eg Alt+F ,
Alt+P. Using numbers is safe, eg. Alt+1, Alt+2... and if you are using
them for shortcuts for a navigation bar, you can do a more natural
mapping.

- Cary Evans

--------------------------------------------------
"Carrie Ritch" <critch at fusionproductions.com>

A List Apart has a really good article on this:
http://www.alistapart.com/stories/accesskeys/

good luck!
carrie

--------------------------------------------------
<brendaj at interaccess.com>

Do you mean "access keys"?  These are an accessibility feature.  Pretty
unpredictable with different browsers though, they either don't work or
behave differently in each one.
--------------------------------------------------

Thanks everybody,

Pradyot Rai
User Interface Consultant,
Fannie Mae