HTML accesskey Attribute
The accesskey attribute is a global attribute and specifies a shortcut key for activating a specific element. Read and find out on what elements you can use it.
The HTML accesskey attribute is a global attribute and specifies a shortcut key for activating/focusing a specific element. The attribute value should consist of one or more printable characters (only the first is used).
In HTML4.1, the accesskey attribute can be only used with the following elements: <a>, <area>, <button>, <input>, <label>, <legend>, and <textarea>.
In HTML5, this attribute can be used with any element.
Triggering the shortcut varies by browser.
When there is more than one element having the same accesskey, modern browsers typically cycle through the elements.
Besides poor browser support, there are other concerns with the accesskey attribute:
- An accesskey value may cause some problems connected with assistive technology functionality, or a system and browser keyboard shortcut.
- Some accesskey value may be missing on some keyboards, in particular when there is a matter of internationalization.
- An accesskey value consisting of numbers may be unclear to those with cognitive concerns.
- Using accesskey may interfere with the natural tab order and focus management.
For these reasons, it’s recommended not to use accesskey for multi-purpose websites and web apps.
Syntax
Syntax of HTML accesskey Attribute
<tag accesskey="single_character"></tag>Example of the HTML accesskey attribute:
Example of the HTML <span class="attribute">"accesskey "</span> attribute
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/learn-html.html" accesskey="h">HTMLonline tutorial</a>
<br />
<a href="https://www.w3docs.com/learn-css.html" accesskey="c">CSS online tutorial</a>
<br />
<a href="https://www.w3docs.com/learn-git.html" accesskey="g">GIT online tutorial</a>
<br />
<p>Chrome, Safari, Opera 15+: [ALT] + <strong>accesskey</strong></p>
<p>Firefox: [ALT] [SHIFT] + <strong>accesskey</strong></p>
<p>Opera prior version 15: [SHIFT] [ESC] + <strong>accesskey</strong></p>
<p>macOS: [Ctrl] [Option] + <strong>accesskey</strong></p>
</body>
</html>Practice
What is true about the HTML accesskey attribute?