Using Aria-Label as a Solution for Overly Complex Markup

Instructor: [0:00] Now, we have to replace the icons for this rewind and fast-forward button. We could do the same thing that we did for the play/pause and volume buttons. However, this can get a little bit overly complex because we have to add a visually hidden alt text. Then we have to hide the icon. [0:19] Before we approach that technique, let's go back to React icons and look up some icons we can use. I'm going to look up FA undo. We're going to use this FA undo alt because it kind of looks like the rewind 15 seconds button.

[0:33] We're also going to do FA redo alt. We're going to use the redo alt and the undo alt. Let's go ahead and import those icons. FA redo alt and FA undo alt. Now, let's go to those buttons. Inside the rewind 15 seconds button, I'm going to use the FA undo alt. I'm also going to type in a span that just says 15S. Next, I'm going to take that text that was previously in the button and on the button itself, I'm going to add an aria-label and set that text to be what that string was.

[1:10] We should still add an aria-hidden to this icon because it is purely decorative at this point. The reason why it's decorative is because this string overrides all of the button text. To see this in action, let's go back to the audio player and inspect this button.

[1:27] If we select the button with the aria-label and then go over to the dev tools and click on accessibility, you can scroll down to the computed properties and you see that the accessible name of that button is rewind 15 seconds.

[1:40] This dev tool is a good way to double check what the accessible name ends up being if you have a few competing things, like aria-label and contents.

[1:47] Let's go ahead and do the same thing on the fast-forward button. We'll take the text of the fast-forward button. Add that as the aria-label. We'll add the FA redo alt and add an aria-hidden equals to 1. Then we'll put a span with 15S inside of it.

[2:06] To summarize, we use the aria-label to change how we were labeling those buttons. As a result, the inner contents of those buttons are completely ignored by.