Label Controls Using the aria-label Attribute

Lesson Objective

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

10 minutes

Lesson

This lesson introduces the aria-label attribute and discusses some of the accessibility challenges of HTML buttons.

Introduction to the aria-label attribute

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

Add aria-label=”Close” to the <button> element with the class name "close".

Edit this code to make it more accessible.

Click here to run the code in a new window.

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.

When using ChromeVox, what has changed from the initial to the revised code?


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?

A screenshot of part of the Gmail interface. There are 7 buttons. 2 of them have the text labels Mark as read and More. The other 5 buttons are image buttons with pictures on them.


Resource