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:

html

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

html

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

HTML | aria-label attribute

Explore