In-Class exercise: Accessibility

Our goal in this exercise is to be cognizant of accessibility issues and take some steps to address them.

When working on fixing the app, you may need to make changes in both JavaScript and CSS.

We'll be using the following GitHub project:
- GitHub React project: https://github.com/nrhodes-hmc/cs124sp22-exercises
- branch: 16-accessibility-starter
1. If you haven't yet already cloned that project, follow the instructions.
2. If you have already cloned that project:
  1. Pull the latest changes (git pull from terminal, or Git/Pull... menu from WebStorm).
  2. Checkout the specified branch above
The application you're working on is a version of the People app.
The app should look like:

Note that the checkbox in the table header will select or unselect all rows.
Are there any issues with contrast? If so, what are they?
Fix any issues.
Are there any issues when the user resizes text? If so, what are they?
Fix any issues.
Are there any issues with using the application from the keyboard? If so, what are they?
Fix any issues.
Use a screen reader to use the People app. Use one of:
- VoiceOver (on Mac, see the Accessibility System Preferences).
  If you've never used VoiceOver, consider taking the VoiceOver Training.
- Narrator (builtin to Windows)
- NVDA for Windows (open-source, free)
Are there any issues with using the application from a screen reader? If so, what are they?
Fix any issues.

Hints:

In Chrome Developer Tools, Lighthouse tab provides useful report on accessibility of the page.
On the Mac, the Digital Color Meter application in Applications/Utilities is useful as a way to see what the hex values of pixels on the screen are.
To see hex, use the following menu: View/Display Values/as Hexadecimal
Contrast checker page allows you to see the contrast ratios for foreground/background color pairs.
Documentation on some attributes: