3

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

Mohammed Rabiulla RABI
  • 473
  • 8
  • 26
  • May be you can find answer to your question here. https://stackoverflow.com/questions/22039910/what-is-aria-label-and-how-should-i-use-it – Nik Oct 01 '18 at 04:21

3 Answers3

4

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>
brennanyoung
  • 6,243
  • 3
  • 26
  • 44
Vikas Jadhav
  • 4,597
  • 2
  • 19
  • 37
  • 1
    i have a doubt whether it reads the aria-label text or text between the tags – Mohammed Rabiulla RABI Oct 01 '18 at 04:44
  • No. you have to add both the text in aria-label. – Vikas Jadhav Oct 01 '18 at 04:53
  • @MohammedRabiullaRABI If you use `aria-labeledby` instead, you can point at multiple ids (separated by spaces). Some of them can be visible, some not. This way you would not need to include the same string twice. e.g. `` would display "Open" but the screenreader would announce "Open in new window". (Assuming that class `offscreen` actually placed the span offscreen somewhere). – brennanyoung May 27 '19 at 13:28
1

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"

aislamfaisal
  • 111
  • 1
  • 4
  • if that text itself is "close" i think no need of aria-label right? – Mohammed Rabiulla RABI Oct 01 '18 at 05:51
  • Yes, but it's better to use it on a label of a targeted field because screen reader reads aria-label. Because in a form using a label is a good practice. If you don't have enough spaces, just use the negative margin to hide that label. But it's a best practice to use a label for a form field. – aislamfaisal Oct 01 '18 at 06:51
1

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

Durgesh Singh
  • 29
  • 8