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.
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?
- Provide an additional indicator to colour - a visible border, label, underline or icon.
- If charts and graphics rely on colour then add distinctive, non-colour differences like hatching patterns or directly applied labels.
- Learn about colour blindness open_in_new
- Install this colour blindness simulator open_in_new to check your designs.
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?
- Install a colour contrast checker. I like this contrast analyser from The Paciello Group open_in_new because it shows values for non-text contrast. I recommend you paste in hex values though as the picker is not always accurate.
- Or use an online colour contrast checker open_in_new
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.
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.
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.
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.
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:
- Web Content Accessibility Guidelines (WCAG) 2.1 open_in_new
- Introduction to Understanding WCAG 2.0 open_in_new
- Understanding WCAG 2.1 open_in_new from the Government Digital Service
- Aviva Standards designs system, Accessibility standards open_in_new
- NHS Digital Service Manual, Design Accessibility Guidance open_in_new
- Accessibility for Everyone open_in_new, Laura Kalbag, A Book Apart (an excellent read!)