HTML - DOM Element accesskey Property

Quiz

The HTML DOM Element accessKey property is used to get (retrieve) and set (update) the access key for an element on a web page. The access key is a keyboard shortcut that allows users to quickly access the element by pressing the specified key.

Once the access key is set for an element, you can access that element by pressing the corresponding key combination, such as Alt + u, Alt + w, etc.

Syntax

Following is the syntax of the HTML DOM Element accessKey (to set the property) −

element.accessKey = keyboard_Key

Here, the "keyboard_Key" specifies a key that serves as the shortcut to the element.

Use the following syntax to get the accessKey −

element.accessKey

Parameters

Since this is a property, it will not accept any parameter.

Return Value

This property returns a string that contains the shortcut key linked to the element's accessKey attribute.

Example 1: Setting accessKey to Label Element

The following is the basic example of the HTML DOM Element accessKey property. It sets the property to the <label> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element accessKey</title>
</head>
<body>
<h3>HTML DOM Element accessKey Property</h3>
<p>Pressing Alt+W will let you focus on the input field.</p>
<form>
   <label for="user" id="userL">Username:</label>
   <input type="text" id="user"name="user"required>
   <br>
</form>
<script>
   document.addEventListener('keydown', (event)=>{
      if(event.altKey && event.key.toLowerCase() === 'w'){
         event.preventDefault();         
         const l = document.getElementById('userL');
         const i = document.getElementById('user');       
         // Set accessKey property dynamically
         l.accessKey = 'w';
         i.focus();
      }
   });
</script>
</body>
</html>

The above program sets the accesskey property to the label element, allowing users to quickly focus on the corresponding input field by pressing 'Alt + W'.

Example 2: Retrieving the accessKey

Here is another example of the accessKey property. We use this property to retrieve the property value which is already set to <label> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element accessKey</title>
</head>
<body>
<h3>HTML DOM Element accessKey Property</h3>
<p>Pressing Alt+R to get the accessKey property.</p>
<form>
   <label for="user" id="userL" accesskey="w">Username:</label>
   <input type="text" id="user"name="user"required>
   <br>
   <p id="res"></p>
</form>
<script>
   document.addEventListener('keydown', (event)=>{
      if(event.altKey && event.key.toLowerCase() === 'r'){
         event.preventDefault();         
         const l=document.getElementById('userL');
         const i=document.getElementById('user');       
         // get accessKey property dynamically
         document.getElementById('res').innerHTML = 
		 "The accesskey property: " + l.accessKey;
      }
   });
</script>
</body>
</html>

When you press the "Alt+R", the above program will display the access key property value.

Example 3: Navigation Links with Access Keys

The example below shows a navigation menu with access keys assigned to each link, allowing users to quickly navigate to different webpage sections by pressing "Alt + access key" −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element accessKey</title>
</head>
<body>
<h3>HTML DOM Element accessKey Property</h3>
<p>Press
<kbd>Alt</kbd>+<kbd>K</kbd>,
<kbd>Alt</kbd> + <kbd>A</kbd>, or
<kbd>Alt</kbd> + <kbd>C</kbd>
to quickly focus on Home, About Us,or Contact Us links respectively.
</p>
<ul>
   <li>
      <a href="#home"accesskey="K" id="hL">Home</a>
   </li>
   <li>
      <a href="#about"accesskey="A" id="hL">About Us</a>
   </li>
   <li>
      <a href="#contact" accesskey="C" id="contactLink">Contact Us</a>
   </li>
</ul> 
<script>
   let key = document.getElementById("hLink").accessKey;
   document.addEventListener('keydown', (event)=> {
      key = 
	  event.altKey && key==="K" || key==="A" || key==="C" ? key : null;
      if (key) {
         event.preventDefault();
         const link = document.querySelector(`[accesskey="${key}"]`);
         if (link) {
            link.focus();
         }
      }
   });
</script>
</body>
</html>

The above program sets the access key to all the links, you can use the access key to directly navigate that link.

Example 4: Activate Action on "AccessKey" Press

This example adds a <button> that opens a model window when clicked or when the access key (Alt+M) is pressed (adding an access key shortcut for users to add action) −

<!DOCTYPE html>
<html lang="en">
<head>  
<title>HTML DOM Element accessKey</title>
</head>
<body>
<h3>HTML DOM Element accessKey Property</h3>
<p>Press "<kbd>Alt + M</kbd>" to open the modal window!</p> 
<button id="modalButton" onclick="openModal()">Open Modal</button>
<div id="myModal"class="modal"style="display:none;">
   <p>This is a modal window.</p>
</div>
<script>
   // Assign access key "M" dynamically  
   document.getElementById("modalButton").accessKey = "M";    
   function openModal() {
      document.getElementById("myModal").style.display = "block";
   }
</script>
</body>
</html>

When the user clicks the button or presses the access key "Alt + M", a model box will be opened.

Supported Browsers

Property
accessKey	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page