Skip to content

Accessibility checklist for designers

Use this checklist to avoid common accessibility issues in your UI designs.

What is this?Does the checklist guarantee an accessible design?Checklist

#What is this?

This is a checklist that Siteimprove designers can use to check whether their UI designs comply with a subset of WCAG 2.1 (level AA) guidelines related to UI design. Please reach out to us on Slack in the #ux_fancy channel if you have any questions or feedback.

#Does the checklist guarantee an accessible design?

No, but it's a solid start and you’ll have avoided a lot of common issues. To avoid other potential accessibility issues, we recommend you also consult the accessibility guidelines of the Fancy components you use in your designs. Lastly, when in doubt about anything accessibility related, don't hesitate to reach out to Fancy's accessibility experts through the #a11y_fancy channel.

#Checklist

#Hierarchy

Heading structure with one level h1 heading and correctly nested headings level h2 and h3
Do

Use Headings to create a clear content hierarchy and help screen reader users navigate a page's content.

Heading structure where levels are skipped, going directly from level h2 to h4.
Don't

Skip Heading levels.

#H1 level

Page with only one h1 level heading.
Do

Provide every page with an h1 level Heading.

Page with multiple h1 level headings.
Don't

Use more than one h1 level Heading per page.

#Component or text styles

Screenshot of Fancy UI kit, where the predefined text styling is used.
Do

Use the text components or styles in the Fancy UI kit for Figma. This enables developers to inspect your designs and figure out the correct Heading level to use in code.

Screenshot of text being styled manually instead of with predefined styles.
Don't

Style Heading level text manually (by selecting the font, font-size, line-height, etc.).

#Styling non-heading text

Code block used to correctly style non-heading text: <InlineText size="xxxLarge" emphasis="strong">104</InlineText><InlineText size="large">issues</InlineText>
Do

Use InlineText or Paragraph components (text styles in Figma) and their size and emphasis properties to style text that doesn’t function as a Heading.

Semantic heading tags used to style non-heading text.
Don't

Use Headings to style text that doesn’t function as a heading.

#Lookalike

Code block used to correctly style headings: <H1 lookalike="h2">Accessibility<H1><H2 lookalike="h3">Potential issues</H2>
Do

Be aware that the Heading component has a lookalike property that makes headings look like different heading levels. Annotate usage of this property in your designs, so it's clear for developers.

Code block used to incorrectly style headings so it skips levels: <H1 lookalike="h2">Accessibility</H1><H2 lookalike="h5">Potential issues</H2>
Don't

Skip Heading levels in your designs, when making use of the lookalike property.

#Color reliance

Input field in an invalid state indicated through use of color, a descriptive label and an accompanying icon. The error message is easy to understand.
Do

Add a descriptive label and/or graphic element, when color is used to convey something.

Input field in an invalid state indicated only through its border color. The error message is vague and harder to understand.
Don't

Rely on color alone to convey something.

#Text

Text with a contrast ratio above 4.5:1. The text is easy to read.
Do

Make sure text has a contrast ratio of at least 4.5:1.

Text with a contrast ratio below 4.5:1. The text is difficult to read.
Don't

Use a contrast ratio below 4.5:1 for text.

#Graphic elements

Siteimprove logo with a contrast ratio above 3:1. The logo is easy to see.
Do

Make sure the parts of a graphic element that are necessary to understand it, have a contrast ratio of 3:1 — both against their background and adjacent parts.

Siteimprove logo with a contrast ratio below 3:1. The logo is difficult to see.
Don't

Use a contrast ratio below 3:1 for graphic elements.

#Interactive elements

Button border with a contrast ratio above 3:1. The button is easy to see.
Do

Make sure interactive elements have a contrast ratio of at least 3:1.

Button border with a contrast ratio below 3:1. The button is difficult to see.
Don't

Use a contrast ratio below 3:1 for interactive elements.

#Plugin

Screenshot of Contrast, a Figma plugin for checking contrast ratios. It shows you two colors failing against each other.
Do

Use the pre-installed “Contrast” Figma plugin to check contrast ratios in your designs. Especially when deviating from the default border, background, and text colors.

Screenshot of a Figma plugin showing that Fancy buttons satisfy contrast requirements. It shows you two colors passing against each other.
Don't

Worry about color contrast between the internal parts that make up Fancy components. They’ve been checked and pass the WCAG AA level.

#Order

A page with various UI elements on it, stacked both horizontally and vertically. Arrows between the elements show how screen reader users experience the page in a linear top-to-bottom left-to-right order.
Do

Keep in mind that screen reader uses will generally experience your design in a linear top-to-bottom, left-to-right order.

A page with various UI elements on it, stacked both horizontally and vertically. A visually prominent element is placed in the bottom right corner. Arrows between the elements show how this element is the last one a screen reader user becomes aware of.
Don't

Assume all users will immediately notice visually prominent UI elements, regardless of their position on a page.

#Important information and actions

An important message shown towards the top of a page, before the elements it concerns. Also, buttons inside the message are preceded by information about the button actions.
Do

Place important information and actions before elements they concern.

An important message shown at the bottom of a page, after the elements it concerns. Also, buttons inside the message precede information about the button actions.
Don't

Place important information and actions after elements they concern.

#Connection

A page with a section containing a table and a button to create new table rows. The first table row is highlighted to indicate that it’s newly created. It’s placed immediately after the button.
Do

Try to place new content immediately after the element that triggered its creation.

A page with several sections and a button to create new sections. A newly created section is not placed immediately after the button. Several other sections are placed between the button and the new section.
Don't

Hesitate to reach out to an accessibility specialist when this is not possible.

#Column headers

A table with visible labels in each column header.
Do

Try to put a visible label in each column header.

A table that's missing a visible label in a column header.
Don't

Omit visible column header labels for aesthetic reasons. Only omit them when every table cell in a column contains an interactive element.

#Interactive content

A table in which the last two columns' cells each contain a single button.
Do

Put only a single interactive element, such as a Button, in a table cell.

A table in which the last column's cells each contain two buttons.
Don't

Put multiple interactive elements components in a table cell. Instead, put them in separate table cells in separate table columns.

#Static content

A table in which each cell contains a single piece of text.
Do

Try to put only a single static element, such as a piece of text, in a table cell.

A table in which the first column's cells all contain two pieces of text.
Don't

Put multiple static elements in a table cell, unless absolutely necessary. Always try splitting up such content into multiple columns.

#No data

A table with content in each cell.
Do

Always put something in a table cell. When there’s no data for a table cell, put in an explanation for why this is the case.

A table with multiple empty cells.
Don't

Leave table cells empty or filled with only a symbol for missing data, such as a dash or icon.

#Visible input labels

A group of radio buttons with a visible label.
Do

Add visible labels to input elements.

A group of radio buttons without a visible label
Don't

Omit visible labels from input elements.

#Placeholders

An input field for entering one's password. A required minimum number of characters is shown above the input field.
Do

Use a visible label or help text for information essential to filling out an input field.

An input field for entering one's password. The input field's placeholder indicates the required minimum number of characters.
Don't

Use placeholder text for essential information.

#Required format

An input field for entering one's birthday. Information about the required date format (dd/mm/yyyy) is shown above the input field.
Do

Provide instructions when an input requires a specific format (date, zip code, phone number, etc.)

An input field for entering one's birthday. Information about the required date format is missing.
Don't

Assume users will know the correct input format.

#Multiple pages

A page that is part of a multi-page form. A heading indicates the user is currently on step 2 of 5.
Do

Inform users about their progress when a form is divided into multiple pages.

A page that is part of a multi-page form. No information is provided about the user's progress, besides buttons for navigating to a previous or next step.
Don't

Only show users whether there’s a previous and/or next step.

#General usage

A toggle group consisting of two buttons. On is labelled "Bar chart", the other "Line chart". Both have icons depicting their respective chart types.
Do

Use icons purposefully to clarify the meaning of UI elements or improve scannability.

A toggle group consisting of two unlabelled buttons. One has a bar chart icon, the other has a line chart icon.
Don't

Use icons mainly for aesthetic reasons.

#Visible icon labels

A button labelled "Edit item" with an icon of a pencil.
Do

Always try to add visible labels to icons.

An unlabelled button with an icon of a pencil.
Don't

Omit visible labels due to aesthetic reasons.

#Tooltip

A button with a plus icon. It has a tooltip that says "Add item".
Do

Add a tooltip to an icon if there’s insufficient space for a visible label.

A button with a plus icon. It has a label and tooltip that both say "Add item".
Don't

Add a tooltip if an icon has a visible label.

#Flashing animations

Three overlapping circles, symbolizing a non-flashing animation.
Do

Avoid flashing animations as much as possible.

Three overlapping circles with lightning bolts, symbolizing a flashing animation.
Don't

Let animations flash more than 3 times, and never more than 3 times per second.

#Static alternatives

A button in a loading state with a timeglass icon.
Do

Provide developers with a static alternative (image) for your animation, since users can disable animations.

A button in a loading state with a static loading spinner in the shape of a circle.
Don't

Always use a single frame from your animation as static alternative. Users may struggle to understand the meaning of such an image.

#Controls

A video with a hovering mouse cursor and a pause button.
Do

Provide controls to pause, stop, or hide videos or auto-updating content (auto-scrolling feeds, image carousels, GIFs, etc.).

A video with a hovering mouse cursor, but no controls to pause, stop, or hide the video.
Don't

Omit such controls.