WCAG checklist for the designer

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.

 

Download checklist

  • 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.
  • 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.
  • 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.
  • Avoid too long or too short lines as it lowers the readability.
  • The optimal line length for body text is between 50–60 characters.
  • 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’.
  • 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.
  • 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.
  • 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.
  • 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.

If you want to know more about web accessibility and how to comply with the legislation on the WCAG principles, please contact me.