What is an accesskey?
An accesskey is an underlined letter in a web page, menu or dialog that indicates to a user a quick, keyboard method of simulating a click on that element. For example, an Apply button may have the letter A underlined. On Windows and UNIX, pressing ALT+A
is a convenient way to push that button. On Macintosh, accesskeys are available only in HTML not in XUL, and they are activated using CTRL+
letter instead of ALT
.
How is an accesskey added to a form control?
An accesskey can be added to an HTML or XUL form control or label by using the accesskey
attribute. For example, here's how we add an accesskey to a XUL button:
<button label="Apply instantly" accesskey="A" /> |
Apply instantly |
- or - | |
<button label="Apply instantly" accesskey="a" /> |
Apply instantly |
In Mozilla, we use DTD's for one more layer of abstraction, for purposes of internationalization. The above example should say:
<button label="Apply instantly" accesskey="&applyInstantly.accesskey" />
(Always use accesskey
instead of akey
).
If methods like confirm()
, confirmEx()
or prompt()
are being used to create a dialog, use an & before the button or checkbox text to make the next character an accesskey. For example, "Do it &now" makes "n" the underlined accesskey. To insert a real ampersand, use &&
.
How do I pick an accesskey letter?
- Accesskey attribute is case sensitive!
- Notice that the difference between the button examples above is the case of the accesskey specified. Mozilla's accesskey implementation will first try to underline a letter of the same case, but if there isn't one it will fall back on a letter of the opposite case. Our preference is to underline the first letter of one of the words, so it's important to be aware of this quirk.
- Avoid duplicates
- Don't use the same accesskey letter twice in the same window.
- Be especially careful of drop down menus in the same window. For example, in the Manage Bookmarks dialog, don't use F, E, V, T or H (File, Edit, View, Tasks, Help).
- Help wanted: it would be useful to have an automated tool to check for duplicate and missing accesskeys in XUL files.
- Make it easy to see
- Use letters at the beginning of the first or second word of the label.
- Use a distinctive consonant or a vowel in the label.
- Use letters with wide widths, such as w, m, and capital letters.
- Avoid:
- Letters with descenders, such as p, g, q, or y. Example: p, g, q, y.
- Letters next to a letter with a descender.
- Letters that are only one pixel wide, such as i or l. Example: i, l.
- Make it easy to remember
- Do the most important prompts first, so that they get the best accesskeys.
- See if a similar prompt has an accesskey elsewhere in Mozilla, and use the same accesskey. There are standard accesskeys used in Windows as well, like Properties.
- If not, try the first letter of the first word in the prompt.
- Next, try the first letter of another word in the prompt.
- Finally, use any non-silent letter in an action word (do these after the rest of the dialog has accesskeys chosen).
- Common elements that don't get accesskeys
- OK buttons.
- Cancel buttons.
- Close buttons.
- Tab panel labels.
- Toolbar buttons
- Tree items
- List items
- Column headers
Are there any crucial bugs I should know about?
- bug 143065 - Scope of accesskeys is not limited to the current tab panel.
Where do accesskeys need to be added?
Look for dependencies of bug 129179 (the XUL accesskey hookup meta bug), or look for bugs with "accesskey" or "mnemonic" in the summary, or look for dialogs where there are no elements with underlined letters.
File bugs under the Keyboard Navigation component, and make meta bug 129179 dependent on them.