React: Accessibility
35mIntermediate2021-01-05
Authors

Kiara Contreras
Front-end developer with a background in tech and customer service
Course details
Perhaps the greatest thing about the world wide web is that it makes so much information available to so many people. However, is this available information accessible to everyone? In this course, Kiara Contreras illustrates why accessibility is important and why it’s necessary to focus on it when you build single-page applications with React, one of the most popular JavaScript front-end frameworks. Kiara covers important topics like testing your application to ensure optimal accessibility, practicing using semantic HTML, updating elements to include focus control, and ensuring mouse events are available through the keyboard. Throughout the course, Kiara stresses the importance of keeping in mind the diversity of your users when building websites, and that creating an accessible website allows for a better experience for more people.
Skills covered
AccessibilityReact.jsMetaDiversity, Equity, and Inclusion (DEI)Front-End Web DevelopmentUser ExperienceWeb DevelopmentDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Accessibility in React
1. Accessibility on the Web
- 02 - The need for accessibility
- 03 - Semantic HTML - The foundation of web accessibility
- 04 - Semantic React tags
2. Keyboard Focus
- 05 - Managing keyboard focus in React components
- 06 - Skipping page content
- 07 - Challenge - Implementing focus and skipping content
- 08 - Solution - Implementing focus and skipping content
3. Mouse and Pointer Events
- 09 - Accessibility issues with mouse and pointer events
- 10 - How to ensure events are accessible by keyboard
4. Testing Your Application
- 11 - Why test your work
- 12 - Testing accessibility with your keyboard
- 13 - Using browser features for testing
- 14 - Testing with a screen reader
Conclusion
- 15 - Resources for web accessibility guidelines
Related courses
- React: Components, Context, and Accessibility
- Learning Gatsby
- Building UI Components with Storybook: Master React Components and UI Design with Storybook for Better Efficiency
- Multi-Platform Video Producing
- UX Foundations: Accessibility
- Premiere Pro: Captioning Video for Web and Social Media
- React: Working with APIs (2018)
- React: State Management (2019)
Related learn paths
- Explore React.js Development
- Explore Accessibility (a11y) Best Practices
- Build for Digital Accessibility
- Explore a Career in Front-End Web Development
- Optimizing Enterprise Security and Productivity Using Microsoft 365
- Prepare for Digital Accessibility
- Develop Your Writing Skills
- Build Your Skills as an Instructional Designer