A new Web application has gone viral! You’re excited to check it out. Before you can get started, you’re required to set up a profile.
You open your profile page, and you encounter the following input field:
There is no label or instruction text so you skip the field. The following message is displayed: “This is a required field.”
You try entering your name, email address, and telephone number to no avail. You keep getting the following message: “The value is invalid.”
Your enthusiasm is waning; however, you persist. You try a few more possible values. Then you review the help for the application. You’re frustrated because the help is not helpful. You’re debating between contacting technical support and abandoning the application.
This is an extreme scenario for sighted users. However, this scenario is all-too-common for visually impaired users who rely on screen readers to navigate applications.
Sighted users can often use visual indicators to determine the purpose of an HTML object. These users cannot access these visual cues. Therefore, screen reader users often rely on accessible text labels to determine an object’s purpose.
Oftentimes, text labels are missing, are not programmatically associated with HTML objects, or are too vague to be helpful. The absence of accessible text labels causes undue frustration and unnecessary barriers for screen reader users.
The Web Accessibility Initiative–Accessible Rich Internet Application (WAI-ARIA) specification provides a simple solution! You can keep your current visual design, and use the aria-label property and the aria-labelledby property to provide accessible text labels.
You can use these properties to label any HTML object, including links, buttons, form fields, divs, and landmark regions. When a screen reader encounters an HTML object that uses one of these properties, announces the corresponding text as the object’s name. If an HTML object uses both properties, the screen reader announces the labels that the aria-labelledby property references.
Use the aria-label property to provide an invisible text label for an HTML object when a visible label is unnecessary or would negatively impact your design. With the aria-label property, you can specify only one label.
When a screen reader encounters the following button, the screen reader announces “X button”:
Screen reader users might ask: “What does the X button do?” To make this button accessible for screen reader users, specify “Delete” for the aria-label property.
<button aria-label=”Delete” onclick=”function()”>X</button>
Now, the screen reader announces “Delete button” when it encounters the button.
You can use the aria-label property in many situations, including the following:
- Provide an accessible label for image-only buttons, such as .
- Clarify the purpose of non-descriptive link text, such as “Read more.”
- Differentiate landmark regions that have the same role, such as a primary and a secondary navigation.
- Provide a hidden label for input fields when a visible label is redundant. A common example is the Search field.
Use the aria-labelledby property to programmatically associate an HTML object with one or more text labels that are already visible on screen. With the aria-labelledby property, you provide the IDs of the HTML objects that contain the labels.
In the following example, the label “Email Address” is visible on screen. The aria-labelledby property associates the “Email Address” label with the input field. In this case, the screen reader announces “Email Address edit” when it encounters the input field.
<th scope=”col” id=”email”>Email Address</th>
<th scope=”row” id=”allison”>Allison Perry</th>
<td><input type=”text” name=”email_1” aria-labelledby=”email”></td>
A screen reader user might ask: “Edit the email address for whom?”
The person’s name is also visible on-screen so sighted users can easily identify whose email address they are editing. To make this input field more accessible for screen reader users, add the person’s name to the label.
<td><input type=”text” name=”email_1” aria-labelledby=”allison email”></td>
Now, the screen reader announces “Allison Perry Email Address edit” when it encounters the input field.
You can use the aria-labelledby property in many situations, including the following:
- Associate multiple, visible labels with an HTML object.
- Associate a cascading menu with its parent menu.
- Provide a label for a group of items, such as a list of radio buttons.
- Clarify the purpose of a landmark region.
Tips for Creating ARIA Labels
Use clear labels
- Describe the action that the HTML object enables a user to perform. For example, use the label “Delete” not “Trash can” for the following image-only button:
- Avoid vague labels. For example, use the label “Click here to learn about ARIA labels” instead of “Click here”.
- Provide a label in addition to placeholder text for input fields. The placeholder text is no longer accessible after a user enters a value.
- Do not include the object’s type or role in its label because that information is redundant. For example, when a screen reader encounters the following button, the screen reader announces “Refresh button”:<button id=”refresh” aria-label=”Refresh”>…insert_image…</button>
If you use the following label, the screen reader announces “Refresh button button”:
<button id=”refresh” aria-label=”Refresh button”>…insert_image…</button>
- Do not provide labels for decorative images. In the following image, the text “Errors” is the label for the error icon: Errors. If you provide the label “Errors” for the icon, the screen reader announces “Errors graphic Errors”.
Use the same label for an HTML object in the user interface and in the supporting documentation. Otherwise, screen reader users will have difficulty finding that object in the user interface or finding information about that object in the documentation.
Consider all users
If a label is helpful for both sighted users and screen reader users, provide a visible label in addition to the hidden text label. For example, sighted users might be unfamiliar with the following image-only button: . In this case, the aria-label text “Manage variables” is useful for all users. Thus, you could also specify this text for the title attribute. The text in the title attribute is displayed in a tooltip when users hover over the button.
<button id=”refresh” aria-label=”Manage variables” title=”Manage variables”>…insert_image…</button>
By Toshiba Burns-Johnson, ©2017 Intercom, Volume 64 Issue 10, November/December.