where and when to use aria-label?

Question

The attribute aria-label when it is used on what situation, . which are the tags that supports this attribute . what are the situations to use this attribute . is there any rule to use this attribute.

please comment if question is unclear

Answer 1

aria-label to provide an invisible label where a visible label cannot be used.

The purpose of this technique is to provide a label for objects that can be read by assistive technology. The aria-label attribute provides the text label for an object, such as a button. When a screen reader encounters the object, the aria-label text is read so that the user will know what it is.

all html tags support's aria-label area-label attributes can be used with

<button aria-label="Close">X</button>

Answer 2

A label is used to describe a field. It's really important to have a label that describes the field so that as a user is tabbing through, they know what they're supposed to do there. Just imagine if you are in a new place but you don't know the name and that is not labled, so how could you know the name of the place. So that's the thing.

Now let's talk about aria-label, it's used to define lables of the current field. It's best to use when label is not visible. Also, it's the best practice to have aria-label for a screen reader, just think about a blind people who are using the assistive technology he is interfacing a form and there is a button, just look below ( MDN Example ):

X

What that blind person will hear in the screen reader, he will hear X, by this text he will not understand that this button is used to close the dialog.

X

If there is an aria-label as like that example, then will surely understand that this button is used to close the dialog.

So it's the best practice to use aria-label in every actionable field.

There is a rule I think we should follow in aria-label, that is "Don't Alter the Meaning of Semantic Elements"

Answer 3

In the example below, a button is styled to look like a typical "close" button, with an X in the middle. Since there is nothing indicating that the purpose of the button is to close the dialog, the aria-label attribute is used to provide the label to any assistive technologies.

 In the example below, a button is styled to look like a typical "close" button, with an X in the middle. Since there is nothing indicating that the purpose of the button is to close the dialog, the aria-label attribute is used to provide the label to any assistive technologies. <button aria-label="Close">X</button> 

X