Using the aria-label attribute
Draft: This page is not complete.
aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead.
This attribute can be used with any typical HTML element; it is not limited to elements that have an ARIA
Example 1: Multiple Labels
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" onclick="myDialog.close()">X</button>
- The most common accessibility API mapping for a label is the accessible name property.
- Attributes, including
aria-labeldeclarations, are ignored by most automatic translation services.
all elements of the base markup
aria-label attribute should only be used on the following elements:
- Interactive elements
- Landmark elements
- Elements that have an explicit widget role
TBD: Add support information for common UA and AT product combinations