1

I have an inteactive web-app with some buttons and inputs, and they have keyboard shortcuts based on their respective labels. Like P for the button labeled 'Press me'. I want to showcase that the button has a keyboard shortcut inside the button itself, which I think would be best way to go about it (?) rather than say, showing a list of all keyboard shortcuts somewhere else. (which actually is also done btw.)

Additionally I'm thinking of giving the buttons more than one keyboard shortcuts for more accessibility. Like P and s both for 'Press me'.

There's two options I thought I could go with:

  1. [P]res[s] me

  2. Press me
    ¯     ¯

Which one would be better? Or something else I should consider?

And if it's underline, then note that the underline tag <u> has be deprecated. (I think this particular case may be the one use-case where it would have been semantically correct.) I might have to go with border-bottom.

Improve this question

1 Answer 1

Reset to default
2

If you are going to visualize shortcut keys, underline them. Do not break up the word and make it more difficult for the user to read the label, just for the sake of providing shortcut key information.

Microsoft Windows has used underlining for many years, and it is still generally recognized. These guidelines are discussed in Microsoft's Guidelines for Keyboard User Interface Design.

However...

Although Microsoft discusses shortcuts for menus there is no discussion for shortcut on buttons. Providing shortcuts for buttons was part of Windows a long time ago (as shown in a Windows 2000 dialog below) but button shortcuts have not been part of the guidelines for some time.

enter image description here

OSX has not used shortcut keys for at least 8 years; being the duration of my OSX use.

It has been a long time since I used a Unix/Linux install (and every windows manager has its own guidelines) but I would be surprised if any still do (if they ever did) illustrate keyboard shortcuts for buttons.

Don't add shortcuts for the sake of adding shortcuts. Keyboard shortcuts provide accessibility advantages; from Microsoft's guidelines linked above:

A well-designed keyboard UI is an important aspect of software accessibility. It enables users who are blind or who have certain motor disabilities to navigate an application and interact with its features. Such users may be unable to operate a mouse, and may rely on assistive technologies — such as keyboard enhancement tools, on-screen keyboards, screen enlargers, screen readers, and voice input utilities — all of which depend on an application's keyboard UI.

... but are otherwise seen as a power-user feature. Your average user is going to use the mouse and click the button. Anything that limits their ability to parse the string on that button (i.e., an underline or brackets) is going to hinder the usability of the site for them.

Two shortcuts for a single button does not equal "more accessible". You may ultimately confuse your users with "this or that" to perform the action. If your trying to be accessible for blind individuals having two shortcuts may also confuse reader software.

Desktop UIs do not illustrate shortcuts on buttons anymore, and I've personally never seen a web UI do it. You would definitely not be following the norm.

I'd ultimately suggest sticking with a providing a help over (via '?') to inform power users the keyboard shortcuts.

Improve this answer
1
  • 1
    A nice detailed answer. However, Microsoft's take on this stuff drives me crazy. They consistently hide productivity-enhancing features such as keyboard shortcuts (or don't even implement them in the first place), thus ensuring that they remain a rarely used feature. Windows has more potential power users than any other software in existence. If they guided those users towards more productive ways of working, it would be hugely beneficial. But instead, they design Windows for someone who is using a computer for the first time, ignoring everyone else's needs.
    – user31143
    Commented Sep 17, 2014 at 6:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.