How to use HTML accesskey
Overview
In this shot, we will learn how to activate or focus an HTML DOM element without clicking the event or using a mouse. We will create a unique shortcut key to focus a DOM element; an accesskey is a keyboard key assigned to a DOM element.
DOM elements can be any elements on an HTML page like paragraph, button, body, etc.
Usage
How to use the shortcut key in different browsers:
In Windows:
- IE, Chrome, Safari, Opera 15+:
[ALT] + accesskey - Opera prior version 15:
[SHIFT] [ESC] + accesskey - Firefox:
[ALT] [SHIFT] + accesskey
In Mac:
- Chrome, Safari, Firefox:
[Control]+[Option]+accesskey
In Linux:
- Chrome:
[Alt]+accesskey - Firefox:
[ALT] [SHIFT] + accesskey
Code
Before you press the accesskey, click on the HTML page text to make the Educative window active and perform the accesskey operation.
Code explanation
We will create a shortcut key to activate the DOM element in the above HTML and JavaScript code.
-
In line 5, in the
<body>tag of the HTML page, we defined an anchor tag which on-click will take you to www.abc.com, and we will do this with the assignedaccesskey ‘w’. -
In line 10, at the end of the
<body>tag, we wrote JavaScript code to assign a uniqueaccesskey ‘w’. We useddocument.getElementById()to get the DOM element and assigned theaccesskey ‘w’using.accessKey property.
Output
On pressing alt + w, we see that the link www.abc.com has been activated without clicking the link.
Troubleshooting
If it does not work:
- First, in the Educative output window, click on the HTML page and then press the keyboard’s
alt + wkey. - If it is still not working, you may be using a different browser. Try with the keys other than
altif you are on a different browser.
RELATED TAGS
CONTRIBUTOR
View all Courses
