HTML accesskey Attribute

Last Updated : 30 Dec, 2024

The HTML accesskey attribute defines a keyboard shortcut to activate or focus an element.

It assigns a keyboard key combination to trigger an element (like a link or button).
Browser support and specific key combinations vary (e.g., Alt + key on Windows, Ctrl + key on macOS).
Use it sparingly and provide clear visual cues for accessibility.

Syntax

<element accesskey = "single_character">

<!DOCTYPE html>
<html>
<body>
    <a href="https://www.example.com" accesskey="e">Example Link (Alt + e)\
    </a>
    <button accesskey="s">Submit (Alt + s)</button>
</body>
</html>

accesskey sets a keyboard shortcut (e.g., Alt + key).
Text in parentheses shows the shortcut to users.

Shortcut to use accesskey

The table describes the shortcut to use Accesskeyy:

Browser	Windows	Mac	Linux
Google Chrome	Alt + single_character	Command + Alt + single_character	Alt + single_character
Mozilla Firefox	Alt + Shift + single_character	Command + Alt + single_character	Alt + Shift + single_character
Internet Explorer	Alt + single_character	N/A	N/A
Safari	Alt + single_character	Command + Alt + single_character	N/A
Opera	Alt + single_character	Command + Alt + single_character	Alt + single_character

Note:

In HTML4.1, the accesskey attributes can be used with only a few elements which include <a>, <area>, <button>, <input>, <label>, <legend>, and <textarea>.
In HTML5, the accesskey attribute can be used with any element.

The behavior of the browser differs when dealing with more than one element having the same accesskey:

Google Chrome and Safari: The last element with the accesskey will be activated
Opera: The first element with the accesskey will be activated
Internet Explorer and Mozilla Firefox: The next element with the accesskey will be activated

More Examples of HTML accesskey Attribute

Assigning Access Keys to Navigation Links

<html>
<body>
    <nav>
        <a href="#home" accesskey="h">Home</a>
        <a href="#about" accesskey="a">About</a>
        <a href="#contact" accesskey="c">Contact</a>
    </nav>
</body>
</html>

Pressing Alt + h (Windows/Linux) or Control + Option + h (Mac) will navigate to the “Home” section.
Pressing Alt + a or Control + Option + a will navigate to the “About” section.
Pressing Alt + c or Control + Option + c will navigate to the “Contact” section.

Assigning Access Keys to Form Controls

<html>
<body>
    <form>
        <label for="username" accesskey="u">Username:</label>
        <input type="text" id="username" name="username"><br><br>
        <label for="password" accesskey="p">Password:</label>
        <input type="password" id="password" name="password"><br><br>
        <button type="submit" accesskey="s">Submit</button>
    </form>
</body>
</html>

Pressing Alt + u (Windows/Linux) or Control + Option + u (Mac) focuses on the “Username” input field.
Pressing Alt + p or Control + Option + p focuses on the “Password” input field.
Pressing Alt + s or Control + Option + s activates the “Submit” button.

Best Practices for Using the accesskey Attribute

Avoid Conflicts: Ensure assigned access keys do not interfere with existing browser or assistive technology shortcuts, as this can hinder accessibility.
Inform Users: Clearly indicate the availability of access keys within the user interface, enabling users to utilize them effectively.
Use Sparingly: Apply access keys only to frequently used interactive elements to prevent overwhelming users and potential conflicts

HTML accesskey Attribute – FAQs

Where can the accesskey attribute be used?

The accesskey attribute can be used with interactive elements like <a>, <button>, <input>, and <textarea> to trigger them with a keyboard shortcut.

Can I assign multiple accesskey shortcuts to the same element?

No, you can only assign one accesskey per element. For multiple shortcuts, use separate elements.

How do browsers handle accesskey conflicts with existing shortcuts?

If an accesskey conflicts with a system or browser shortcut, the built-in shortcut takes precedence, and the accesskey might not work.

What characters can be used as an accesskey?

You can use letters, numbers, and some symbols as an accesskey. Letters or numbers are most common.

Is the accesskey attribute case-sensitive?

No, the accesskey is not case-sensitive. Uppercase and lowercase letters are treated the same.

HTML action Attribute

IshitaNegi

Improve

Article Tags :