Develop Accessible Web Apps with React
Offered By: egghead.io
Course Description
Overview
A large number of people are unable to use the web effectively due to an impairment or disability.
As developers there are several tools and techniques we can use to make our web applications accessible, ensuring a great user experience that includes everyone.
We all agree that Accessibility is important. However, it’s a broad landscape and can be overwhelming figuring out where to start!
Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for testing, refactoring, and building your applications with accessibility in mind.
After this course, you'll have a jump start on auditing and fixing accessibility issues in your applications and gain a better understanding of your target users and how to approach your web app design from their perspectives.
As developers there are several tools and techniques we can use to make our web applications accessible, ensuring a great user experience that includes everyone.
We all agree that Accessibility is important. However, it’s a broad landscape and can be overwhelming figuring out where to start!
Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for testing, refactoring, and building your applications with accessibility in mind.
After this course, you'll have a jump start on auditing and fixing accessibility issues in your applications and gain a better understanding of your target users and how to approach your web app design from their perspectives.
Syllabus
- Set up ESLint to Audit Accessibility Issues in React
- Use react-axe to Audit Accessibility Issues at Runtime during Development
- Use the axe Browser Extension to Audit a Web Page for Accessibility Issues
- Use tota11y to Visualize Accessibility Issues
- Use a High Contrast Browser Extension to Find Color Contrast Accessibility Issues
- Change Display Preferences on Mac to Find Color Contrast Accessibility Issues
- Enable High Contrast Mode on Windows
- Access and Customize VoiceOver Settings on MacOS
- Navigate a Webpage with VoiceOver in Safari
- Test for Landmark Region Accessibility Issues in React
- Define Landmark Regions of a web page using ARIA roles
- Define Landmark Regions of a web page using HTML5 sectioning elements
- Test for Heading Level Accessibility Issues
- Correctly Define Heading Levels of a Web Page
- Test for Form Control Label Accessibility Issues
- Ensure Form Controls have Accessible Labels
- Add Accessible Labels to Elements Whose Labels are Not Clear Enough
- Add Accessible Labels to Provide Elements with More Context
- Add an Accessible Label to an Element from the Text of Other Elements
- Add Accessible Descriptions to Elements
- Test for Image Alternative Text Accessibility Issues
- Define Images with Appropriate Text Alternatives
- Test for Insufficient Color Contrast Accessibility Issues
- Use Sufficient Color Contrast in Web Page Design
- Use More than Color Alone to Convey Information in a Web Page
- Define a Live Region to Ensure Dynamic Changes are Announced by Assistive Technologies
- Appropriately Set the Focus on Each Page Load of a Web Application
- WTF are Accessible Design Patterns?
Taught by
Erin Doyle
Related Courses
Introduction to Amazon Polly (Thai)Amazon Web Services via AWS Skill Builder Corporate Video Essentials: Post-Production
LinkedIn Learning iOS App Development: Accessibility
LinkedIn Learning Learning Premiere Elements 15
LinkedIn Learning Audio Recording and Editing with Audacity: Audacity A to Z
Skillshare