Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | aria-label attribute

  • Difficulty Level : Medium
  • Last Updated : 27 Sep, 2019

The aria-label helps define a string and provides additional information about the structure of the document for users using assistive technology. In most cases, arial-label is used to replace an existing label with more precise information. However, we should be careful while using aria-label as it does not work with all HTML elements.

The aria-label attribute can be used with HTML elements such as:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • select
  • textarea
  • button
  • a(when href=”#” is in use)
  • audio and video(when control=”#” is in use)

The aria-label attribute does not always work with HTML elements like span, p, div. It may work across some of the browse assistive technology combinations.

Syntax:






<button aria-label="open" onclick="function()">CLICK</button>

Here, a button will be created with “click” written on it. The aria-label – Provides a label that exact mentions its output/function by using assistive technologies.

Example:




<!DOCTYPE html>
<html>
  
<head>
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <button value="open">open</button>
  
        <button aria-label="opens a new window" 
                value="open"> open </button>
    </center>
</body>
  
</html>

Here, as you can see an HTML page will open and will contain buttons side by side that are identical to each other without any difference. Now if someone is using a chromevox extension in chrome and have their earphone on while pressing tab, then they will hear the word “open” when the first button is selected, whereas when the second button is selected they will hear the phrase “opens a new window”. This is particularly useful in cases of people with bad eyesight who can see the two buttons but can’t comprehend the text written on them.

Output:
Before clicking the button:

After:




My Personal Notes arrow_drop_up
Recommended Articles
Page :