Accessibility Checklist

accessibility-checklist

# Accessibility Checklist

## Overview
This checklist can be referenced when building or updating a feature. Not every item will apply to every situation.

- [ ] Feature is usable with a keyboard only (using Tab to move forward, Shift + Tab to move backwards)
  - [ ] You can interact with all controls, links, and menus
  - [ ] You can see what item has focus at all times
  - [ ] The visual focus order matches the intended interaction order
  - [ ] You are not “trapped” within one element
- [ ] Semantic markup is used appropriately (`<article>`, `<header>`, `<label>`, etc.)
- [ ] Screen Readers appropriately read the content and structure of the component
  - [ ] In a manner that makes sense
  - [ ] At least one mobile device was tested
  - [ ] At least 3 different modern browsers were tested
- [ ] If making color adjustments, colors pass at least AA [contrast standards](https://webaim.org/resources/contrastchecker/)
- [ ] The component is readable and functional when the page is zoomed to 200%
- [ ] If adding images, they have alt text that is descriptive of the image content
  - [ ] All relevant images use an img tag
  - [ ] If the alt attribute is empty, ensure the image is purely decorative
- [ ] Link text is descriptive (not just “details” or “read more”)
- [ ] All links have hover states
- [ ] Headings and labels are descriptive of purpose
  - [ ] Heading elements or tags follow [sequential order](https://web.dev/heading-order/) and do not skip order
- [ ] If using an iframe, ensure it has a title
- [ ] If using forms/inputs, all inputs must have labels
  - [ ] Placeholder text is not to be used in place of labels on inputs and must not contain pertinent information to fill out the form
- [ ] Appropriate [ARIA roles](https://a11yproject.com/posts/getting-started-aria/) and attributes have been added, only when necessary
- [ ] Videos/audio have transcripts
  - [ ] Videos with audio have captions