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 Elements Whose Labels are Not Clear Enough

    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 is not descriptive enough for those who 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 that better describes 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. The problem we have here is that we have a button on each of these pages. You can see in the source for this button that its text is just a plus sign.

    0:15 Those of us who can see are very used to seeing buttons that have a plus sign to indicate that you're going to add something. Over here with this button, we have this chevron pointing back. Again, for those of us who can see, we're used to seeing this to indicate we're going back to the previous page.

    0:37 The problem with these buttons is while they work well for those of us who can see and we can visually understand their meaning, that meaning is not conveyed as clearly to those using screen readers. Let's demonstrate that. I'm in Safari. I'm going to go ahead and run voiceover.

    Voiceover: 0:54 Plus button.

    Instructor: 0:56 As you can hear, the screen reader reads this as "plus button." That's not very descriptive for those people who can't see the button and probably don't know what plus button indicates or what to expect the functionality to be from that button. If we go to the browse page, let's hear what this button sounds like.

    Voiceover: 1:15 Less back button.

    Instructor: 1:17 This button is read as "less back" because the screen reader is reading this character as a less sign. Combining the two, it says, "Less back." That definitely is not going to make sense to those using a screen reader. If they hear "less back button," that is not conveying to them the functionality that we're going to go back to the previous page.

    1:39 Both of these buttons need accessible labels because their own text is not descriptive enough to convey what functionality we can expect these buttons to have. One more test real quick. Let's see what's shown in the rotor for these buttons.

    Voiceover: 1:52 Less back button.

    Instructor: 1:53 Same thing, less back button. On our previous page...

    Voiceover: 1:56 Form controls menu. Plus button.

    Instructor: 1:58 Plus button. Whether navigating to the button or using the rotor, it is not clear to users what this button is going to do. Let's fix this.

    Voiceover: 2:07 Voiceover off.

    Instructor: 2:08 Here's that component that we were just looking, that had the plus button. As we could see from looking at the source previously, the text for the button is just a plus sign. We want to give this button a label that says that we're adding a movie when you click this button.

    2:23 We can do that by adding an aria-label attribute. We can be as verbose as we want with this. This is what's going to be read to a screen reader user when they focus on this button. We want to tell them what this button is. Really what it is is a button to add a movie.

    2:38 Now if we look at the component for the browse page button, here it is right here. There is our less back text. Let's give this an aria-label saying, "Go back to wish list" because that's what's going to happen if you click that button. Now let's hear how that sounds when read by the screen reader.

    Voiceover: 2:58 Add a movie button.

    Instructor: 2:59 Now the button says, "Add a movie." That is a lot more useful. Let's check that out with the rotor.

    Voiceover: 3:04 Form controls menu. Add a movie button.

    Instructor: 3:06 There it is again. If we're navigating through the rotor and we're going through the buttons and we hear "Add a movie," that's very clear now what we can expect that button to do. Let's check out the button on the browse page.

    Voiceover: 3:17 Go back to wish list button.

    Instructor: 3:19 Now that says, "Go back to wish list button." Very helpful.

    Voiceover: 3:22 Go back to wish list button.

    Instructor: 3:24 Those buttons are now dramatically more useful to a screen reader than they were before just by adding an aria-label attribute.