:warning: notes have been moved to eggheadio-course-notes!

Develop Accessible Web Apps with React Notes

About

This repo contains notes from Erin Doyle's Develop Accessible Web Apps with React Notes.

These notes contain the same structure as the transcriptions, along with additional rewrites, links to resources, and personal takes on the lesson. Feel free to submit additions to these notes, but please don't remove anything (unless we messed up or misunderstood something).

Generally, there is one document for each lesson in the course. If there are related lessons, the notes will be in the same document.

Course Objective ?

US census says about 20% of people self-identify as having a disability of some sort. Writing webpages with accessibility in mind is not only important; it's crucial.

This course will deal with the following issues:

• How do you test your (React) application for a11y issues?
• What tools should you be using?
• Once you have identified the issues, how can you fix them?

Table of Contents ?

• 00. Develop Accessible Web Apps with React
• 01. Set up ESLint to Audit Accessibility Issues in React
• 02. Use react-axe to Audit Accessibility Issues at Runtime during Development
• 03. Use the axe Browser Extension to Audit a Web Page for Accessibility Issues
• 04. Use tota11y to Visualize Accessibility Issues
• 05. Use a High Contrast Browser Extension to Find Color Contrast Accessibility Issues
• 06. Change Display Preferences on Mac to Find Color Contrast Accessibility Issues
• 07. Enable High Contrast Mode on Windows
• 08. Access and Customize VoiceOver Settings on MacOS
• 09. Navigate a Webpage with VoiceOver in Safari
• 10.Test for Landmark Region Accessibility Issues in React
• 11. Define Landmark Regions of a web page using ARIA roles
• 12. Define Landmark Regions of a web page using HTML5 sectioning elements
• 13. Test for Heading Level Accessibility Issues
• 14. Correctly Define Heading Levels of a Web Page
• 15. Test for Form Control Label Accessibility Issues
• 16. Ensure Form Controls have Accessible Labels
• 17. Add Accessible Labels to Elements Whose Labels are Not Clear Enough
• 18. Add Accessible Labels to Provide Elements with More Context
• 19. Add an Accessible Label to an Element from the Text of Other Elements
• 20. Add Accessible Descriptions to Elements
• 21. Test for Image Alternative Text Accessibility Issues
• 22. Define Images with Appropriate Text Alternatives
• 23. Test for Insufficient Color Contrast Accessibility Issues
• 24. Use Sufficient Color Contrast in Web Page Design
• 25. Use More than Color Alone to Convey Information in a Web Page
• 26. Define a Live Region to Ensure Dynamic Changes are Announced by Assistive Technologies
• 27. Appropriately Set the Focus on Each Page Load of a Web Application
• 28. WTF are Accessible Design Patterns?

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Eva ??