accesskey #

::: section-content The accesskey global attribute provides a hint for generating a keyboard shortcut for the current element. The attribute value must consist of a single printable character (which includes accented and other characters that can be generated by the keyboard). :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: accesskey #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-shorter .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

If you need to relax, press the Stress reliever!

<button accesskey="s">Stress reliever</button>

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} ::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: :::

::: {#sect1 .notecard .note} Note: In the WHATWG spec, it says you can specify multiple space-separated characters, and the browser will use the first one it supports. However, this does not work in most browsers. IE/Edge uses the first one it supports without problems, provided there are no conflicts with other commands. :::

The way to activate the accesskey depends on the browser and its platform:

Accessibility concerns #

::: section-content In addition to poor browser support, there are numerous concerns with the accesskey attribute:

• An accesskey value can conflict with a system or browser keyboard shortcut, or assistive technology functionality. What may work for one combination of operating system, assistive technology, and browser may not work with other combinations.
• Certain accesskey values may not be present on certain keyboards, especially when internationalization is a concern. So adapting to specific languages could cause further problems.
• accesskey values that rely on numbers may be confusing to individuals experiencing cognitive concerns, where the number doesn't have a logical association with the functionality it triggers.
• Informing the user that accesskeys are present, so that they are aware of the functionality. If the system lacks a method of notifying the user about this feature, the user might accidentally activate accesskeys.

Because of these issues, it is generally advised not to use accesskeys for most general-purpose websites and web apps.

• WebAIM: Keyboard Accessibility - Accesskey{target="_blank"} :::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-accesskey-attribute]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

            Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

accesskey 1 12 1 Yes 15 ≤4 4.4 18 4 14 ≤3.2 1.0 :::

See also #

::: section-content

• HTMLElement.accessKey
• HTMLElement.accessKeyLabel
• All global attributes.
• aria-keyshortcuts{target="_blank"} :::

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey{._attribution-link} :::