- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
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 |
To Continue Learning Please Login
Login with Google