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 accesskey:
| 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.
Example: 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.
Example: 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