HTML accesskey Global Attribute

Description

The HTML global attribute accesskey provides a hint for generating a keyboard shortcut for the current element. The attribute value must consist of a single printable character (which includes accented and other characters that can be generated by the keyboard).

To use the accesskey attribute, simply add it to the HTML element you want to assign a keyboard shortcut to. For example, to assign the keyboard shortcut S to a search input field, you would use the following code:

<input type="search" accesskey="S">

Once you have added the accesskey attribute to an element, users can press the specified key combination to focus and activate that element. The exact key combination required will vary depending on the operating system and browser being used.

For example, on Windows, users would press Alt + S to focus and activate the search input field in the above example. On macOS, users would press Ctrl + Opt + S.

It is important to note that the accesskey attribute is not supported by all browsers and operating systems. Additionally, it is important to avoid using the same accesskey value for multiple elements on the same page, as this can lead to unexpected behavior.

Accessibility concerns

There are a number of accessibility concerns associated with the accesskey attribute. For example, an accesskey value can conflict with a system or browser keyboard shortcut, or assistive technology functionality. Additionally, what may work for one combination of operating system, assistive technology, and browser may not work with other combinations.

For these reasons, it is generally recommended to avoid using the accesskey attribute. Instead, you should focus on providing other ways for users to navigate and interact with your content, such as through keyboard-accessible menus and focusable links.

Syntax

<element accesskey="character">

Values

characterAny character between A - Z.

Example

HTML

To follow the link, press <strong>[alt]</strong> + <strong>h</strong> (add <strong>[shift]</strong> if you are using Firefox):

<br>

<br>

<a href="https://www.cssportal.com" accesskey="h">CSS Portal Homepage</a>

<br>

<br>

Note: As this is an iframe, the page will appear here.

Result

Editor