Accessibility checklist for designers

Here’s an accessibility checklist I’m working on to help ensure the products I design can be used by as many people as possible. I appreciate accessibility is more than just a checklist of WCAG criteria but as a complete beginner, it’s proving a useful place to start! I’m always learning so if you spot any obvious errors or omissions get in touch and help me out.

Colour

Use of Colour (A)

Don’t rely on colour alone to communicate meaning or to distinguish visual elements. People see colours differently, are colour blind or have difficulty telling different colours apart. WCAG guidelines 1.4.1 open_in_new How can I use colour thoughtfully?

Contrast minimum (AA)

Giving text a strong contrast colour against the background makes it easier for people to read and interact with. The contrast ratio should be at least: 4.5:1 for text smaller than 24px, or 19px bold. 3:1 for text larger than 24px, or 19px bold. WCAG guidelines 1.4.3 open_in_new How can I test colour contrast?

Non-Text contrast (AA)

All components and graphics must have a contrast ratio of at least 3:1 against adjacent colours, unless they are purely decorative. This applies to all elements required to understand the content of a page including icons, charts, infographics and controls, along with states like hover or active. Inactive components/states and purely decorative elements are not required to meet this contrast ratio. WCAG guidelines 1.4.11 open_in_new How can I test non-text colour contrast? Install or use a colour contrast checker open_in_new. Use the value for ‘non-text contrast’ or 'graphical objects and user interface components' rather than for text. Related criteria

Focus visible (AA)

It must be easy to tell which element has keyboard focus. This helps sighted keyboard users orient themselves within the page, and confidently interact with it. WCAG guidelines 2.4.7 open_in_new How can I make sure there is a visible focus state?
  • Provide a strong visible focus indicator to interactive elements like links, buttons and form fields.
  • The focus state needs to be different to the mouse hover state so the user can visually see a difference.
  • Focus indicators needs a 3:1 colour contrast ratio against the background colour. Use a colour contrast checker open_in_new to check this.
  • If in doubt use the browser default focus indicator.

Copy

As a designer, you often write placeholder copy without thoughtful consideration; button text, link text, headings. Even with a copywriter or content designer on the case these small bits of microcopy often carry through to development. Being thoughtful about your copy from the outset can have a positive impact on the final journey.

Images of text (AA)

Text that is essential to the journey must not be presented as part of an image. Text inside an image cannot be resized and deteriorates in quality when magnified. WCAG guidelines 1.4.5 open_in_new It's easy to meet this criteria
  • Just don't make images of text. It's not 1999. :)

Headings and labels (AA)

Headings must describe the topic or purpose of the content in the section below. Labels must indicate the purpose of the field they relate to. Headings must be used appropriately and nested correctly, only using a capital letter for the first word. WCAG guidelines 2.4.6 open_in_new What makes a good heading or label?
  • Clear and unambiguous copy helps people with reading difficulties to understand the topic and the purpose of the content. It also helps screen reader users to navigate to the relevant sections of content on the page.
  • When laying out your design be thoughtful about how copy is sectioned and how form fields are labelled. Avoiding ambiguity and applying some common sense is helpful to all users.

Layout

Meaningful sequence (A)

Order content in your designs to ensure reading and navigation order are be logical and intuitive. WCAG guidelines 1.3.2 open_in_new Why is a meaningful sequence important?
  • If the order of the content is important, the user must access the content in this order. A person might be accessing the page with the intended visual styling, with CSS styling disabled or listening to it with a screen reader.
  • Learn about the semantic markup of a web page. Ordering content in your designs thoughtfully will ensure screens are structured correctly. This will save time and hassle in development.
Related links

Orientation (AA)

A screen must not be locked to either horizontal or vertical orientation, unless this is essential. Essential applications could be a television screen, a messaging or virtual reality app. WCAG guidelines 1.3.4 open_in_new

Resize text (AA)

It must be possible for people to increase the size of text by up to 200%. This helps ensure that partially sighted people can comfortably read your content. Whilst this change will be made in code, it is worth bearing in mind when designing page layouts. Check that the copy can flow at a larger size and is not constrained by the layout.  WCAG guidelines 1.4.4 open_in_new

Consistent navigation (AA)

If navigation is repeated across multiple pages, all pages must be presented in a consistent manner. A consistent menu and page structure makes it easier for people to learn how to navigate. It also enables people to develop strategies for more efficient navigation, like screen reader shortcuts.  WCAG guidelines 3.2.3 open_in_new How do I make navigation consistent?
  • If your product has a navigation menu or a breadcrumb used on multiple pages, make sure it looks and operates the same way on each page.

Content

Sensory characteristics (A)

Instructions must not rely upon shape, size or visual location. Avoid instructions like “click the red button to continue” or “instructions are in the right-hand column”. WCAG guidelines 1.3.3 open_in_new

Consistent identitication (AA)

If a feature is used in multiple places it must be identified in a consistent way. WCAG guidelines 3.2.4 open_in_new How can I identify features consistently?
  • Label buttons and links consistently throughout a journey, eg, Next or Continue.
  • If form fields have the same purpose they need to be labelled consistently wherever used.
  • Keep icons consistent if they are used for a specific purpose.

Accessibility checklist: Sources: