XUL Accesskey FAQ and Policies

  • Revision slug: XUL_Accesskey_FAQ_and_Policies
  • Revision title: XUL Accesskey FAQ and Policies
  • Revision id: 55974
  • Created:
  • Creator: Simplex
  • Is current revision? No
  • Comment add missing link

Revision Content

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.
    • Letters next to a letter with a descender.
    • Letters that are only one pixel wide, such as i or 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.

Revision Source

<h3 name="What_is_an_accesskey.3F"> What is an accesskey? </h3>
<p>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.
</p>
<h3 name="How_is_an_accesskey_added_to_a_form_control.3F"> How is an accesskey added to a form control? </h3>
<p>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:
</p>
<table style="margin:0;">

<tbody><tr>
<td><code>&lt;button label="Apply instantly" accesskey="A" /&gt;</code>
</td><td style="background-color: #DDF; border: blue outset; padding: 3px;"><span style="text-decoration: underline;">A</span>pply instantly
</td></tr>

<tr>
<td align="center" colspan="2">- or -
</td></tr>

<tr>
<td><code>&lt;button label="Apply instantly" accesskey="a" /&gt;</code>
</td><td style="background-color: #DDF; border: blue outset; padding: 3px;">Apply inst<span style="text-decoration: underline;">a</span>ntly
</td></tr>
</tbody></table>
<p>In Mozilla, we use DTD's for one more layer of abstraction, for purposes of internationalization. The above example should say:
</p><p><code>&lt;button label="Apply instantly" accesskey="&amp;applyInstantly.accesskey" /&gt;         </code>
</p><p>(Always use <code>accesskey</code> instead of <code>akey</code>).
</p><p>If methods like <code>confirm()</code>, <code>confirmEx()</code> or <code>prompt()</code> are being used to create a dialog, use an &amp; before the button or checkbox text to make the next character an accesskey. For example, "Do it &amp;now" makes "n" the underlined accesskey. To insert a real ampersand, use &amp;&amp;.
</p>
<h3 name="How_do_I_pick_an_accesskey_letter.3F"> How do I pick an accesskey letter? </h3>
<ul><li> Accesskey attribute is case sensitive!
<ul><li> 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.
</li></ul>
</li><li> Avoid duplicates
<ul><li> Don't use the same accesskey letter twice in the same window.
</li><li> 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).
</li><li> Help wanted: it would be useful to have an automated tool to check for duplicate and missing accesskeys in XUL files.
</li></ul>
</li><li> Make it easy to see
<ul><li> Use letters at the beginning of the first or second word of the label.
</li><li> Use a distinctive consonant or a vowel in the label.
</li><li> Use letters with wide widths, such as w, m, and capital letters.
</li><li> Avoid Letters with descenders, such as p, g, q, or y.
</li><li> Letters next to a letter with a descender.
</li><li> Letters that are only one pixel wide, such as i or l.
</li></ul>
</li><li> Make it easy to remember
<ul><li> Do the most important prompts first, so that they get the best accesskeys.
</li><li> 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.
</li><li> If not, try the first letter of the first word in the prompt.
</li><li> Next, try the first letter of another word in the prompt.
</li><li> Finally, use any non-silent letter in an action word (do these after the rest of the dialog has accesskeys chosen).
</li></ul>
</li><li> Common elements that don't get accesskeys
<ul><li> OK buttons.
</li><li> Cancel buttons.
</li><li> Close buttons.
</li><li> Tab panel labels.
</li><li> Toolbar buttons
</li><li> Tree items
</li><li> List items
</li><li> Column headers
</li></ul>
</li></ul>
<h3 name="Are_there_any_crucial_bugs_I_should_know_about.3F"> Are there any crucial bugs I should know about? </h3>
<ul><li> <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=143065">Bug 143065</a> - Scope of accesskeys is not limited to the current tab panel.
</li></ul>
<h3 name="Where_do_accesskeys_need_to_be_added.3F"> Where do accesskeys need to be added? </h3>
<p>Look for dependencies of <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=129179">bug 129179</a> (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.
</p><p>File bugs under the Keyboard Navigation component, and make meta <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=129179">bug 129179</a> dependent on them.
</p>
Revert to this revision