Accessibility Audit Checklist

Use this checklist as a guideline for testing the exact same "happy path (the flow that a user would follow to complete an action)", multiple user journeys, and edge cases that a component would undergo. Do this using only a keyboard, only a screen reader, and with visibility (colorblindness, contrast) in mind to ensure all users can navigate logically, access and understand information necessary to make decisions, and complete the task in a timely manner.

• Component is usable with a keyboard only
  • 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 correctly read the content and structure of the component
  • In a manner that will allow them to hear and understand all content in order of importance to allow them to take action with full clarity of context
  • 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
• The component is readable and functional when the page is zoomed to 200%
• If adding pertinent and informative images, they have alt text that is descriptive of the image content
  • If the alt attribute is empty, ensure the image is purely decorative
  • All relevant images use an <img> or <svg> tag
  • [object Object]
  • If an <svg> is not used for decorative purposes, directly nest a <title> tag with the description (More on SVG Accessibility).
• Link text is descriptive (not just "details" or "read more") and lets users know if they're leaving to visit an external site
• All links have hover states and are visibly different from the text surrounding it
• Headings and labels are descriptive of purpose
• If using an iframe, it has a title
• If using forms/inputs, all inputs have labels
  • Placeholder text is not used in place of labels on inputs and doesn't contain pertinent information to fill out the form
• Appropriate ARIA roles and attributes have been added, only when necessary
• Video/audio has transcript
  • Videos with audio have captions
  • Videos have easily accessible stop/play controls
  • Videos that are looped display stop/play controls
• Anything that may require additional testing not included in this checklist should have further instructions for accessibility validation on the Pull Request. WebAIM offers suggestions for more granular testing.