HTML | aria-label attribute

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:

  • 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.