User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

In our (web) application, we want tooltips (read: title attributes) that also indicate shortcuts for buttons. We have some button that involve the cursor ('arrow') keys.

We've tried using characters like ⬅ and ←, but they just don't look right. We've also tried spelling it out, e.g. "Left Arrow Key", but that's a bit verbose.

What's a good way to do this?

share|improve this question
If you want greater flexibility, consider creating custom tooltips in CSS or javascript and falling back to title attributes for accessibility reasons (unless you're asking for accessibility reasons in the first place). – Rahul Dec 20 '10 at 16:44

Maybe you could try a dingbat font with actual keyboard keys? Something like this:

alt text

share|improve this answer
I like the look… but is it even possible to change the font used for the html title attribute? Also, are those fonts available on every system? – Sietse Dec 20 '10 at 11:22
You are right. I simply did not understand the part where you wanted this in the page title of your html document. Sorry. – fluxd Dec 20 '10 at 13:42

What's wrong with your first icon? It looks almost perfect, to me. Of course, it would be better to see it in the context of your other 'key shortcut' icons, but it looks very much like it will convey the important info., namely 'this is the left cursor key'.

If you want to be extra clear, you could colour it beige according to the fact that it's the most likely colour of the key the user will press. Maybe some shading and reshaping of the icon would help to emphasise its 'key-ness'.

share|improve this answer
The first icon doesn't work because of the missing 'key-ness'. Also, we're using the title attribute, so I don't think we can shade or shape the characters. – Sietse Dec 20 '10 at 11:05
I don't really get the color comment though… are you referring to the actual keyboard key? In that case, isn't it more likely to be black? – Sietse Dec 20 '10 at 11:25

Tooltips from the basic 'title' attribute are very limited and not your best option: browsers may or may not pop them up as you expect them.

I think @Rahul comment is very good in this regard: you may want to look at a more complete tooltip solution. There's plenty of pre-made libraries to give you more flexible, solid and appealing tooltips that the basic 'title' attribute.

If you are looking at the title attribute for accessibility reasons (as a fallback option from more complex tooltip solutions), then I think the verbose option ('Press Left Arrow Key to...') is your best option: a screenreader would read it out nicely.

share|improve this answer

If you move beyond using the title attribute and instead utilize a CSS solution, you could actually provide both a small image of the keyboard key as well as a short description below it.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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