1
Introduction to Creating a Custom Accessible Audio Player with React
1m 52s
2
Setup Native Audio and Plan our Audio Player Code
4m 49s
3
Creating a Toggle for Playing and Pausing the Audio
2m 47s
4
Implementing a Duration State
2m 15s
5
Tracking Audio Playback Progress by Adding Elapsed Time
1m 56s
6
Create the Audio Scrubber to Control Playback Position
2m 26s
7
Add Play and Pause Events to the Audio Player
1m 8s
8
Add Fast-Forward and Rewind 15 Second Buttons
2m 51s
9
Creating a Playback Rate Button
1m 43s
10
Creating a Toggle Button for Muting and Unmuting an Audio Element in React
2m 55s
11
Implementing a Volume Range with an onChange Event
4m 42s
12
Design Accessible Buttons Using Icons
4m 37s
13
Using Aria-Label as a Solution for Overly Complex Markup
2m 16s
14
Create a Human Readable Time Formatter
5m 55s
15
Create a Dropdown Menu for Rates
19m 26s
16
Using a forwardRef to Create External Controls
3m 5s

Using Aria-Label as a Solution for Overly Complex Markup

a11y
React

Share this video with your friends

I suggest using the previously learned approach but keep in mind that it may lead to an overly complex markup. We also use the aria-label attribute, which can be used to override the text within a label element.

Think about: Why would you use an aria-label instead of creating a visually hidden span?

Using Aria-Label as a Solution for Overly Complex Markup

Share this video with your friends

Course

Create an Accessible Audio Player with the HTML Media Element and React