Develop Accessible Web Apps with React by Erin Doyle
- Set up ESLint to Audit Accessibility Issues in React
- Access and Customize VoiceOver Settings on MacOS
- Navigate a Webpage with VoiceOver in Safari
- Enable High Contrast Mode on Windows
- 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
- Change Display Preferences on Mac to Find Color Contrast Accessibility Issues
- Use a High Contrast Browser Extension to Find Color Contrast Accessibility Issues
- Define Landmark Regions of a web page using ARIA roles
- Test for Landmark Region Accessibility Issues in React
- 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 Image Alternative Text Accessibility Issues
- Define Images with Appropriate Text Alternatives
- Use Sufficient Color Contrast in Web Page Design
- Use More than Color Alone to Convey Information in a Web Page
- Test for Insufficient Color Contrast Accessibility Issues
- 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
- 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?