Qarpeo LogoInstitute

accesskey

The accesskey attribute in HTML designates a shortcut key that activates or focuses on an element, enhancing accessibility and navigation. It is included within the element's tag.

accesskey Attribute

The accesskey global attributes allows users to activate or focus an element using a keyboard shortcut. It accepts a single printable character, including special or accented symbols.

Syntax

index.html
<element accesskey="character">

Example

The accesskey attribute assigns a shortcut key to an element for quick navigation.

HTML tutorial
CSS tutorial

The accesskey attribute specifies a shortcut key to activate or focus an element.

Note: Browser shortcut key combinations vary:

  • Edge, IE, Chrome, Safari, Opera 15+: + accesskey
  • Opera (pre-15): + + accesskey
  • Firefox: + + accesskey
index.html
<a href="https://institute.qarpeo.com/cs/html" accesskey="h">HTML tutorial</a><br>
<a href="https://institute.qarpeo.com/cs/css" accesskey="c">CSS tutorial</a>
<p>The accesskey attribute specifies a shortcut key to activate/focus an element.</p>
<p><strong>Note:</strong> Browser shortcut key combinations vary:</p>
<ul>
  <li>Edge, IE, Chrome, Safari, Opera 15+: <kbd>ALT</kbd> + <em>accesskey</em></li>
  <li>Opera (pre-15): <kbd>SHIFT</kbd> + <kbd>ESC</kbd> + <em>accesskey</em></li>
  <li>Firefox: <kbd>ALT</kbd> + <kbd>SHIFT</kbd> + <em>accesskey</em></li>
</ul>
Users can focus on elements using the assigned key combination.
Access keys may conflict with browser or system shortcuts. To avoid issues, most browsers require the alt key alongside the accesskey.

Concerns with the accesskey Attribute

While useful, accesskey can cause several issues:

  • Shortcut Conflicts: May overlap with browser, system, or assistive technology shortcuts.
  • Internationalization: Certain keys may not be available on all keyboards.
  • Cognitive Accessibility: Numeric accesskey values can be confusing for users with cognitive impairments.
  • User Awareness: Many users are unaware of accesskey shortcuts, leading to accidental activations.
Due to these concerns, using accesskey is generally discouraged for most websites and applications.

See Also

  • HTMLElement.accessKey
  • HTMLElement.accessKeyLabel
  • All global attributes
  • aria-keyshortcuts

Conclusion

The accesskey attribute helps enhance navigation by assigning keyboard shortcuts to elements. However, due to potential conflicts, internationalization challenges, and usability concerns, its use is often discouraged. Developers should explore alternative accessibility options, such as ARIA attributes, to create a more inclusive and user-friendly experience.

Global

HTML global attributes are attributes that can be used with any HTML element, no matter the element's type. These attributes enhance the functionality of elements, contributing to better accessibility, styling, interactivity, and overall user experience.

anchor

The anchor attribute in HTML links a positioned element to a specific anchor, allowing precise placement relative to another element using CSS anchor positioning. This feature enables dynamic layouts but lacks broad browser support, making it experimental.