Code review checklist for accessibility
Text equivalents for non-text elements
- Ensure that
<img>elements accurately reflect the content and/or function of the image in the context that the image is used.
- Ensure that button text values accurately describe the purpose of buttons.
- Ensure that any decorative images have the
Ensure that the visual order of elements matches the DOM order of elements.
Ensure that link text describes the target and purpose and that it can be distinguished from other links on the page. Review the methods to indicate the purpose of a link and the WCAG 2.0 technique to provide link text. If the link text is not descriptive, ensure that one of the following conditions is true:
- The surrounding context conveys the link's purpose. For example, the sentence, table cell, or heading immediately preceding the link can provide context.
- A programmatic solution such as off-screen text or
aria-describedbyaugments the link text.
Ensure that proper semantic HTML elements are used to describe the content of the page or component. For example,
<ul> unordered lists are used for lists,
<h6> are used in order for headings,
<nav> is used for navigation.
For custom interactive controls that are used in ways that are not part of the HTML standard, ensure that the elements have the necessary ARIA roles, states, and properties. For information about how to make components and behaviors accessible with ARIA roles, states, and properties, see WAI-ARIA Authoring Practices 1.1.