Label Controls Using the aria-label Attribute
After this lesson, you will be able to add the
aria-label attribute to label a button when label text is not visible on the screen.
Time to complete
This lesson introduces the
aria-label attribute and discusses some of the accessibility challenges of HTML buttons.
Introduction to the
It is not always practical or desirable to have visible labels for all of your objects. For example, there might only be enough space in your toolbar for a printer icon without a visible “Print” label. In cases like this, you should use the
aria-label attribute to provide text labels so that users of screen readers and other adaptive technologies can understand what the object is used for.
Accessibility challenges of HTML buttons
A general purpose element like a button might not convey its purpose to adaptive technologies. For example, in the final project, the X button to close the dialog uses the multiplication symbol (×), which means that it looks like an 'x' without actually being identical to the actual letter 'x'. This looks good visually, but it causes the screen reader to say, "multiplication button." By adding the
aria-label attribute, you can explicitly label that button as "Close," and the screen reader will say, "Close button."
Instructions to modify code
aria-label=”Close” to the
<button> element with the class name
Edit this code to make it more accessible.
Verify the accessibility of your code
Use the Accessibility Developer Tools you downloaded in Lesson 1.1 to verify that your code passes all of the Accessibility Audit tests, including:
- Controls and media elements should have labels
Use ChromeVox to hear how your page has improved as a result of your changes.
The Gmail interface uses ARIA labels to clarify for screen readers what each button does and if there are additional options for the user to take (for example, expand and collapse). Based on the buttons in the image below, how many ARIA labels are needed?