Introduction to Creating a Custom Accessible Audio Player with React
In this course, we'll be focusing on building an accessible component by using a built-in browser API with React to implement best practices in accessibility custom features.
Everyone is responsible for accessibility, and we need to start creating features and websites with that in mind. The goal of this course is for you to exploit your understanding of HTML and aria, and be able to look at any common features and identify the different accessibility patterns.
With this course you won't only learn about accessibility, but also will learn about HTMLMediaElement API, and state management in React.
Lindsey Kopacz: [0:00] Hey, and welcome to my course on building a custom accessible audio player using React. The point of this course is to learn a bit more about accessibility by architecting a custom feature. [0:10] The goal isn't to learn how to build an audio player per se. It's to learn how to use the built-in browser APIs with a framework like React and combine that knowledge with the best practice accessibility patterns to learn how to architect custom features.
[0:24] A lot of developers understand the basics of accessibility, but oftentimes, we are getting designs for features and we're clueless on to how to start architecting them with accessibility in mind. It's always a good idea to ask designers for accessibility annotations because everyone's responsible for accessibility.
[0:43] Depending on the knowledge within your organization, it may be a good time for you to collaborate with your designers and architects something together based on your solid understanding of HTML and ARIA authoring practices.
[0:55] My goal is for you to be able to look at any custom feature and think about common accessibility patterns that already exists. We can use these as building blocks to make that feature accessible to everyone.
[1:05] Not only will you be learning about accessibility through a project, but you will also be learning more about the HTML media element API. We'll tap into this API that's built into the browser using React to help you create this custom feature.
[1:18] You'll also be managing a great deal of state within this application. It's a great time to not only improve your accessibility skills, but also see how that pairs with React. We won't be going over CSS in this course, but I chose elements that are customizable with CSS. Frankly, CSS and design aren't my areas of expertise, but there are plenty of Egghead courses that focus on CSS.
[1:41] The skills you learn here will help you think creatively about how to make advanced features in your project more accessible and using React to make things more accessible and not less.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!