Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Create a shortcut key to activate an element in HTML
The accesskey attribute in HTML allows you to create keyboard shortcuts for activating elements like links, buttons, and form controls. This global attribute enhances web accessibility and provides quick navigation options for users.
The accesskey attribute accepts a single character value that, when combined with browser-specific modifier keys, activates the associated element. This feature is particularly useful for improving website usability and accessibility.
Syntax
Following is the syntax for the accesskey attribute −
<element accesskey="character">Content</element>
The character value must be a single printable character that can be typed on a keyboard, including letters, numbers, and special characters.
Browser-Specific Key Combinations
Different browsers and operating systems use different key combinations to activate accesskey shortcuts −
| Browser | Windows | Linux | macOS |
|---|---|---|---|
| Firefox | Alt + Shift + key | Alt + Shift + key | Control + Option + key |
| Chrome | Alt + key | Alt + key | Control + Option + key |
| Safari | Alt + key | N/A | Control + Option + key |
| Edge | Alt + key | Alt + key | Control + Option + key |
| Opera 15+ | Alt + key | Alt + key | Control + Option + key |
Basic Accesskey Example
Following example demonstrates how to use accesskey with different HTML elements −
<!DOCTYPE html>
<html>
<head>
<title>Accesskey Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;">
<h1>Keyboard Shortcuts Demo</h1>
<p>Press <kbd>Alt + W</kbd> (or browser-specific combination) to open the link:</p>
<a href="https://www.tutorialspoint.com/" accesskey="w" target="_blank">Visit TutorialsPoint</a>
<p>Press <kbd>Alt + N</kbd> to focus on the input field:</p>
<label for="name">Enter Your Name: </label>
<input type="text" id="name" name="name" accesskey="n" style="padding: 5px;">
<p>Press <kbd>Alt + S</kbd> to submit the form:</p>
<button accesskey="s" onclick="alert('Form submitted!')" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px;">Submit</button>
</body>
</html>
The output displays a page with three interactive elements, each activated by their respective keyboard shortcuts −
Keyboard Shortcuts Demo Press Alt + W (or browser-specific combination) to open the link: Visit TutorialsPoint Press Alt + N to focus on the input field: Enter Your Name: [input field] Press Alt + S to submit the form: [Submit button]
Accesskey with Form Elements
The accesskey attribute is commonly used with form elements to improve navigation and user experience −
<!DOCTYPE html>
<html>
<head>
<title>Form Accesskey Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.8;">
<h2>Registration Form with Shortcuts</h2>
<form>
<label for="username">Username (<kbd>Alt + U</kbd>):</label><br>
<input type="text" id="username" accesskey="u" style="padding: 8px; margin: 5px 0; width: 200px;"><br><br>
<label for="email">Email (<kbd>Alt + E</kbd>):</label><br>
<input type="email" id="email" accesskey="e" style="padding: 8px; margin: 5px 0; width: 200px;"><br><br>
<label for="message">Message (<kbd>Alt + M</kbd>):</label><br>
<textarea id="message" accesskey="m" rows="4" style="padding: 8px; margin: 5px 0; width: 200px;"></textarea><br><br>
<button type="button" accesskey="r" onclick="document.forms[0].reset(); alert('Form reset!')" style="padding: 10px 15px; margin: 5px; background: #dc3545; color: white; border: none; border-radius: 4px;">Reset (<kbd>Alt + R</kbd>)</button>
<button type="button" accesskey="b" onclick="alert('Form submitted!')" style="padding: 10px 15px; margin: 5px; background: #28a745; color: white; border: none; border-radius: 4px;">Submit (<kbd>Alt + B</kbd>)</button>
</form>
</body>
</html>
This example shows how accesskey enhances form usability by providing keyboard shortcuts for all major form elements.
Accesskey Best Practices
When implementing accesskey shortcuts, follow these guidelines for optimal user experience −
<!DOCTYPE html>
<html>
<head>
<title>Accesskey Best Practices</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;">
<h2>Navigation Menu with Shortcuts</h2>
<nav style="background: #f8f9fa; padding: 15px; border-radius: 5px; margin-bottom: 20px;">
<a href="/home" accesskey="h" style="margin: 0 10px; text-decoration: underline;"><u>H</u>ome</a>
<a href="/about" accesskey="a" style="margin: 0 10px; text-decoration: underline;"><u>A</u>bout</a>
<a href="/contact" accesskey="c" style="margin: 0 10px; text-decoration: underline;"><u>C</u>ontact</a>
<a href="/services" accesskey="v" style="margin: 0 10px; text-decoration: underline;">Ser<u>v</u>ices</a>
</nav>
<div style="background: #e7f3ff; padding: 15px; border-radius: 5px; border-left: 4px solid #2196f3;">
<h4>Shortcut Keys:</h4>
<p><kbd>Alt + H</kbd> - Home | <kbd>Alt + A</kbd> - About | <kbd>Alt + C</kbd> - Contact | <kbd>Alt + V</kbd> - Services</p>
<p style="font-size: 12px; color: #666; margin-top: 10px;">Note: Underlined letters indicate the accesskey for each link.</p>
</div>
</body>
</html>
This example shows visual indicators (underlined letters) that help users identify available keyboard shortcuts.
Key Points
-
Unique values − Each accesskey value should be unique within a page to avoid conflicts.
-
Case sensitivity − Accesskey values are case-insensitive, so "A" and "a" are treated the same.
-
Visual indicators − Use underlining or other visual cues to show which letter is the accesskey.
-
Common conventions − Use intuitive letters like "H" for Home, "S" for Submit, "R" for Reset.
-
Avoid conflicts − Be aware that some key combinations are reserved by browsers or operating systems.
Conclusion
The accesskey attribute provides an effective way to create keyboard shortcuts for HTML elements, improving both accessibility and user experience. While browser implementations vary, proper use of accesskey with clear visual indicators helps users navigate websites more efficiently through keyboard shortcuts.
3K+ Views
