aria-label (Property)

aria-label is used for the objects where users need to know the action associated with them. Purpose of a link, action associated with a button, label for a form field etc. aria-label can be used for providing alternate text for an informative image. Aria-label is used to identify a generic region on a web page, differentiate between two similar landmarks etc. For a region role where a page does not have visible content that acts as the heading aria-label can be helpful. When the page contains two navigation regions and a is marked with role=”navigation” twice, they can be differentiated with aria-label primary and secondary.

When an aria-label is used along with the native labelling techniques aria-label take priority. Eg, For an image if both alt text and aria-label are used then aria-label information will be read for screen reader users. Similarly for a button if the value information and the aria-label are provided aria-label takes priority. Be aware that if aria-label and aria-labelledby are used then aria-labelledby will take priority.

aria-label examples

Below section gives some examples of aria-label marking the section with aria-label as aria-label example.

Input type button

For the button below instead of value aria-label continue is used

In the button below aria-label continue is used along with value “go”.

Alternate text for informative image

In the image below aria-label is used instead of alt attribute

In the below image both alternate text and aria-label are used.

Slate used for braille

label for input type text and checkboxes

The below text field and check box has aria-label instead of title text

The same form fields text box and check box with both aria-label and title attributes having different label text.

1 Comment to "aria-label (Property)"

    February 26, 2015 - 11:25 am | Permalink

    Do you have a cheetsheet for ARIA properties?

Comments are closed.