Open In App

HTML accesskey Attribute

Last Updated : 11 Jul, 2025
Comments
Improve
Suggest changes
5 Likes
Like
Report

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">
HTML 
<!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:

BrowserWindowsMacLinux
Google ChromeAlt + single_characterCommand + Alt + single_characterAlt + single_character
Mozilla FirefoxAlt + Shift + single_characterCommand + Alt + single_characterAlt + Shift + single_character
Internet ExplorerAlt + single_characterN/AN/A
SafariAlt + single_characterCommand + Alt + single_characterN/A
OperaAlt + single_characterCommand + Alt + single_characterAlt + 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 
<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 
<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

I

IshitaNegi
Improve
Article Tags :

Explore

Lightbox