# ♿ A11y

## What is it?

### ADA Compliance (American Disabiliy Act)

- The goal is to protect the civil rights of individuals with physical or mental impairments by way of reducing the accessibility barriers to public services (in this scenario, the web)

### WCAG (Web Content Accessibility Guidelines)

https://www.w3.org/TR/WCAG20/

### Who am I helping?

People who are...

- Blind or visually impaired
- Colorblindness
- Sensitive to movement
- Sensitive to sound volume

## What is it not?

- It is not a something you turn on with switch
- It is not a feature
- It is not a clean up task

## What can I do?

- Experiment with your OS's built-in screen reader `Cmd+F5`
- Get familiar with the browser's accessiblity tab in dev tools `Cmd+Opt+i`
- Text casing matters. All-caps should only be used for domain acronyms.
- Be mindful of your content's tab order
- For latin based languages, does it flow left->right, top->bottom?
- If you can tab to it, it should have an `aria-label`
- If your element needs has a click handler it should be a `button` element
- If you are changing the page's context, use an anchor (`a`) tag
- Leverage tooling to highlight trouble when it happens
- [Eslint + A11y plugin](https://github.com/evcohen/eslint-plugin-jsx-a11y)
- [Lighthouse](https://developers.google.com/web/tools/lighthouse) (Chrome)
- [Axe](https://www.deque.com/axe) (Deque Systems)
- [react-axe](https://github.com/dequelabs/react-axe)