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