Add Accessible Labels to Provide Elements with More Context
Labeling inputs, elements, and widgets add context and clarity for assistive technology such as screen readers. Some elements do not already have some sort of labeling text being displayed visually, such as a <button> without descriptive text or an <icon> or part of a more complex widget. Others may have some form of text label but it does not provide enough context to be useful enough for those that cannot see it. The addition of an aria-label attribute to the element will provide it with an accessible label so that when that element is focused by a screen reader, for instance, a label is read provides better context for the element and what a user can expect from it.
Instructor: [0:00] Here I have an application that has some known issues with accessible labels. Here I have Safari open. If I open the rotor in voiceover, we can demonstrate the issue.
Voiceover: [0:10] Form controls menu.
Instructor: [0:12] If you look at this page, we have a number of buttons, one for each movie that allows you to add that movie to your wish list. However, in the rotor you just see the same text over and over again. If we were to go through this menu...
Voiceover: [0:29] Add button. Add button. Add button. Add button. Add button.
Instructor: [0:33] we would just hear "Add button" over and over again. There's no additional context telling us what are we adding. We don't even know that this button, if we click it, is going to add a specific movie. We certainly don't know which of those movies it's going to add. This is completely unusable for a screen reader user at this point. Again, this is something we can easily fix.
Voiceover: [0:54] Voiceover off.
Instructor: [0:56] Here's the component that generates that button. When the movie is already in the wish list, the button is going to say remove. When it's not, it's going to say add. That gets passed into this movie toolbar button component. Let's look at that.
[1:10] We're already passing down that button text, which is either going to be add or remove. We also have our movie title available here. We can make use of that.
[1:18] Let's give this a more accessible label using aria-label. We can use that button text. It's going to be add or remove, depending, and then the name of the movie. Let's go ahead and try that out. If I run the rotor, here are all our buttons.
Voiceover: [1:36] Form controls menu. Add "Inception" button.
Instructor: [1:38] Add Inception.
Voiceover: [1:38] Add "Gladiator" button.
Instructor: [1:40] Add Gladiator.
Voiceover: [1:41] Add "Raiders of the Lost Ark" button. Add "Mission Impossible - Fallout" button. Add "Die Hard" button.
Instructor: [1:46] Now we can clearly hear which movie each of these buttons is going to add. Just by adding that aria-label attribute, we've dramatically increased the accessibility of this page.