Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Develop Accessible Web Apps with React

via egghead.io

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.

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

Reviews

4.7 rating at egghead.io based on 88 ratings

Start your review of Develop Accessible Web Apps with React

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.