Front-end accessibility checklist

Users can have different disabilities.  As a front-end designer, your role is to ensure that disabled users can use your app with ease.

1. Page structure

Users shall be able to navigate through your app with ease.

• Use semantic HTML to create a broad outline of your page and organize the content.
• If you have to use divs for interactions, ensure they are focusable and labelled appropriately.
• Don’t use “titles” attribute.

WCAG 2.1 reference:

• 1.3.1 Info and Relationships

2. Images

If an image is meaningful, any users shall be able to easily access it and understand it.

• Add a text describing the image/icon in the alt text.
• Use null alt text (alt="") when text describing the image/icon is already on the page or if it is displayed with a label.
• If an image is purely decorative, use null alt text (alt="") or CSS background images.

WCAG 2.1 references:

• 1.1 Text Alternatives (Guideline)
• 1.1.1 Non-text Content
• 1.4.5 Images of Text

3. Color & contrast

Users shall be able to distinguish the content from the background.

• Verify that a contrast ratio of at least 4.5:1 between the background and small texts is applied using a color contrast tool. For large texts (at 14 pt bold/18 pt regular and up), the ratio shall be at least 3:1.
• Verify that the color palette fit accessibility requirement with tools like Accessible Color Palette Builder or Contrast Grid.

WCAG 2.1 references:

• Guideline 1.4.3 – Contrast (Minimum)
• 1.4.1 Use of Color

4. Keyboard access

Users shall be able to navigate through your app using a keyboard.

• Make sure to have a logical tab and focus order.
• Test keyboard access by navigating through the page using the tab key.
• Make sure all interactive elements can be reach and trigger using the spacebar, enter key, or arrow keys.
• Make sure that focus is always visible.

WCAG 2.1 references:

• 1.3.2 Meaningful Sequence
• 2.1 Keyboard Accessible (Guideline)
• 2.1.1 Keyboard
• 2.1.2 No Keyboard Trap
• 2.4.3 Focus Order| WCAG 2.0
• 2.4.7 Focus Visible

5. Screen reader

Users shall be able to navigate through your app using a screen reader.

• Add a language attribute.
• Make sure that all links have descriptive text. Links text shall be as specific as possible.
• Use a screen reader to navigate throughout your app. Verify that everything is introduced correctly and that you can perform all the tasks.

Learn how to use screen readers:

• NVDA
• Jaws
• Voiceover

WCAG 2.1 references:

• 1.1.1 Non-text Content
• 1.3.1 Info and Relationships
• 2.4.4 Link Purpose (In Context)

We recommend using aXe to test your app for accessibility. It is a great Chrome extension that allows you to see at a glance if your app has accessibility issues, where to find them and how to fix them.

Be aware: Since aXe doesn’t support transparency, you might see color contrast issues when using RGBA for instance. To accurately check your color contrast ratio, please use a Sketch plugin or the WCAG contrast checker Chrome extension tool.

Find aXe download link with instruction on how to use it in our Asset section.

If you have questions about your app accessibility level, join us on Slack to talk with experts on our #accessiblity channel.