HTML - accesskey Attribute

HTML accesskey attribute is a global attribute that provides a hint for generating a keyboard shortcut for the current element.

The accesskey attribute is browser-dependent. It may vary from browser to browser. And supports all HTML tags. The attribute value must be a single character, such as a letter or a digit. In HTML5, the accesskey attribute can be used with any tag, but in HTML4.1, the accesskey attributes can be used with only few tags, which include <a>, <area>, <button>, <input>, <label>, <legend>, and <textarea>.

Syntax

<Tag accesskey  = "single_character">

Applies On

Almost all the HTML tags supports usage of accesskey attribute.

Shortcut to use access key

Following is the table which describe the shortcut to use access key

Browser	Windows	Mac	Linux
Google chrome	Alt + single_char	Command + Alt + single_char	Alt + single_char
Mozilla Firefox	Alt + Shift + single_char	Command + Alt + single_char	Alt + Shift + single_char
Internet Explorer	Alt + single_char	NA	NA
Safari	Alt + single_char	Command+Alt+single_char	NA
Opera 15+	Alt + single_char	Command+Alt+single_char	Alt + single_char

Following table describe the activation of the element

Browser	Activation
Google chrome	The last element with the accesskey will be activated.
Mozilla Firefox	The next element with the accesskey will be activated.
Internet Explorer	The next element with the accesskey will be activated.
Safari	The last element with the accesskey will be activated.
Opera 15+	The first element with the accesskey will be activated.

Examples of HTML accesskey Attribute

Bellow examples will illustrate the HTML accesskey attribute, where and how we should use this attribute!

Define shortcut for hyperlink using accesskey attribute

In the following example, we are creating an HTML document and using the accesskey attributes we define shortcut to access external webpages.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML accesskey Attribute</title>
    <style>
        .navbar {
            background-color: #333;
            overflow: hidden;
        }

        .navbar a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
        }

        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>
</head>

<body>
    <h1>Accesskey Attribute Example</h1>
    <p>Use the following access keys to navigate quickly:</p>
    <ul>
        <li>
            <strong>Alt + H</strong> (Windows) or 
            <strong>Ctrl + Option + H</strong> (Mac) - Go to HTML tutorial
        </li>
        <li>
            <strong>Alt + C</strong> (Windows) or 
            <strong>Ctrl + Option + C</strong> (Mac) - Go to CSS tutorial
        </li>
        <li>
            <strong>Alt + P</strong> (Windows) or 
            <strong>Ctrl + Option + P</strong> (Mac) - Go to PHP tutorial
        </li>
    </ul>
    <h3>Select tutorials or press shortcut....</h3>
    <nav class="navbar">
        <a href="/html/index.htm" accesskey="h">HTML</a>
        <a href="/css/index.htm" accesskey="c">CSS</a>
        <a href="/php/index.htm" accesskey="p">PHP</a>
    </nav>
</body>

</html>

Focus input tag using accesskey Attribute

Here access key is used with input tag to change focus of different input elements.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML accesskey Attribute</title>
</head>

<body>

    <h2>Input Field with Accesskey</h2>
    <p>Use the following access keys to navigate quickly:</p>
    <ul>
        <li>
            <strong>Alt + N</strong> (Windows) or 
            <strong>Ctrl + Option + N</strong> (Mac) - Focus Name input
        </li>
        <li>
            <strong>Alt + M</strong> (Windows) or 
            <strong>Ctrl + Option + M</strong> (Mac) - Focus Message area
        </li>
    </ul>
    <br><br>
    <form action="/html/index.htm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" accesskey="n" 
               placeholder="Enter your name" autofocus>
        <br><br>

        <label for="message">Message:</label>
        <br>
        <textarea id="message" name="message" rows="4" cols="50" 
               accesskey="m" placeholder="Enter your message">
   </textarea>
        <br><br>
        <button type="submit">Submit</button>
    </form>

</body>

</html>

Supported Browsers

Attribute
accesskey	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm