Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
accesskey
dom
communitycreator

How to use HTML accesskey

Ayush Trivedi

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:

  1. IE, Chrome, Safari, Opera 15+: [ALT] + accesskey
  2. Opera prior version 15: [SHIFT] [ESC] + accesskey
  3. Firefox: [ALT] [SHIFT] + accesskey

In Mac:

  1. Chrome, Safari, Firefox:[Control] +[Option] + accesskey

In Linux:

  1. Chrome: [Alt] + accesskey
  2. 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 assigned accesskey ‘w’.

  • In line 10, at the end of the <body> tag, we wrote JavaScript code to assign a unique accesskey ‘w’. We used document.getElementById() to get the DOM element and assigned the accesskey ‘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 + w key.
  • If it is still not working, you may be using a different browser. Try with the keys other than alt if you are on a different browser.

RELATED TAGS

html
accesskey
dom
communitycreator
RELATED COURSES

View all Courses

Keep Exploring