Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Add Accessible Labels to Provide Elements with More Context

    Erin DoyleErin Doyle
    reactReact
    >=16.10.2
    screen-readerScreen Reader
    ariaARIA
    safarisafari

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    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.