πŸ“¦

Accessibility Checklist: Design

This checklist serves as a list of criteria for both designers and QA regarding making an accessibly-designed page. When QA reviews a design (such as one in Figma) for accessibility, these criteria are what they are thinking about while inspecting components.

This list of criteria is largely focused on the presence of important components, or strictly visual checks. For instance, a form is inspected for proper labels, but the programmatic association between a field and its label is more an implementation and development matter.

Visuals and Layout

Color & Contrast

For information about contrast ratios, see this resource.

For calculating color contrast between two colors, you can use this web resource or try the Colour Contrast Checker program.

The following components have a contrast ratio of at least 3:1:
The following components have a contrast ratio of at least 4.5:1:
Links should always be easily identifiable through non-color means, including both default and hover states.
Information is conveyed by more means than color alone.

Layout & Navigation

Each website should include at least two of the following:
The user's location is displayed either by breadcrumbs, a site map, or indication in a navigation menu.
When a navigation menu is presented on multiple pages, the links should appear in the same order on each page.
A "skip to main content" button is available on every page.

Misc.

There is a highly visible keyboard focus style provided.
Images of text are avoided, except in cases such as logos.
Components with the same functionality across multiple pages have consistent labeling on each page.
Components repeated across pages appear in the same relative order where they appear.
Items on the page should not automatically move, blink, scroll, or update, including carousels.

Forms and Widgets

Forms

Fields

Semantic, descriptive labels for form inputs are provided. Placeholder text is insufficient.
Labels for form inputs are placed consistently and visually associated with the form input.
Required fields have a visible means of identifying them that is not color alone.

Errors

If an input error is detected and if suggestions for correction are known, provide suggestions for fixing the submission.
Fields with errors must include some non-color way to identify them.
Provide easy ways to confirm, correct, or reverse a user action where a mistake would cause a serious real-world consequence (e.g. submitting financial data, entering into a legal agreement, submitting test data, or making a transaction).

Widgets

Widgets must not require multipoint or path-based gestures such as swiping or dragging. An equivalent, click/tap control must be provided.
The target size for mouse or touch events ('clickables') that are not inline with text (or have an equivalent that is) must be 44x44 pixels or larger. It is acceptable for the visual icon to be smaller than 44x44: this only relates to the size of the target box for interaction.
In general, there should be immediate feedback on all interactions: buttons pressed, form submissions, etc. This feedback should be available to sighted users as well as screen readers. An obvious activation of a feature (a video beginning to play for instance) counts as feedback here.