Go to content

WCAG Checklist for the Designer

In this checklist, we have gathered good advice and tips for those who work with the design of websites and apps, and want to ensure that your design meets the requirements for web accessibility.

Published April 1, 2020 By Freddie Green

WCAG checklist for the designer

In this checklist, we have gathered good advice and tips for those who work with the design of websites and apps, and want to ensure that your design meets the requirements for web accessibility.

Semantic structure
  • Make sure all design and content follows a logical, semantic structure
  • Note that the reading order must be the same as the visual order on the page
Colours and contrast
  • Ensure adequate contrast between foreground and background
  • Foreground text must have sufficient contrast to background colours. This includes text on images, background gradients, buttons and other elements
  • Do not draw attention to important information or elements using colour alone. Use a combination of text, colour or graphic objects
Text and fonts
  • Use real text instead of graphic text, as it can be read by screen readers and can be enlarged much better
  • Always use CSS for styling
  • Avoid excessive use of capital letters as they are harder to read, especially for screen readers
  • Pay attention to font sizes and avoid using smaller than 10pt font size
Line length
  • Avoid too long or too short lines as it lowers the readability
  • The optimal line length for body text is between 50–60 characters
Links
  • Make sure links stand out visually in ways other than just using colour (e.g. by emphasising them)
  • Design indicators that make it easy for keyboard users to determine if something is a link
  • Design a ‘skip to content’ link and make it accessible at the top of all pages
  • Avoid links with bland text like ‘click here’ or ‘read more’
Animation, video and audio
  • Draw attention to image and media alternatives in your design such as:
    • Visible links to audio transcripts
    • Visible links to descriptive versions of videos
    • Text along with icons and graphic buttons
    • Captions and descriptions for tables or complex graphs
  • Collaborate with content writers and developers to provide alternatives to non-text content
  • Avoid flashing animations and content that auto-plays
  • Allow users to stop animations or play audio automatically. This applies to carousels, image sliders, background audio and videos
Fields and forms
  • Make sure input fields and forms have descriptive labels and instructions
  • Always show validation errors, error messages, and offer the user instructions to correct any errors
  • Avoid too much space between labels and fields
Interactive elements
  • Makes it easy to identify interactive elements such as links and buttons
  • For example, you can change the appearance of links when the mouse or keyboard selects it or when you touch the screen
  • Make sure that the styles and naming of interactive elements are used consistently throughout the site
Navigation
  • Make it easy to navigate across the site in more ways than one, for example with website search and a sitemap
  • Help users understand where they are on the site or page by providing orientation tags such as breadcrumbs and clear headings
  • Make sure cross-page navigation has consistent naming, styling, and position
  • Make a ‘skip to content’ link and make it available at the top of all pages
How can we help?

We work with many aspects of web accessibility and are familiar with all three WCAG levels. We look holistically at the web accessibility field to understand its connection with user experience, traffic and performance to optimise your investment. We offer:  

  • Web accessibility audits
  • Guidance on WCAG compliance
  • Web accessibility implementation
  • Accessibility training for key staff (editors, designers etc.)