This checklist provides an overview of the areas of WCAG that are simple to identify and test.
These tests are designed to be fast, and get a quick overview of the accessibility of a page of content.
They're based on the Web Content Accessibility Guidelines (WCAG).
Who should use this checklist?
- Content editors and designers
When should this checklist be used?
Use this checklist to review any new or updated page before you publish.
You can also use it to review an existing page.
Remember you can also use SiteImprove to test a page either in draft or live.
Checklist
-
Colour contrast: Is the colour contrast ratio of all text strong enough against the background colour?
- In most cases the CMS will take care of this for you, but be aware of how text may sit over an image or background,
- Be especially careful with infographics, charts and graphs,
- You can use the WebAIM: Contrast Checker online tool to help you check colour contrast.
-
Colour with meaning: When colour is used to show information, is it supplemented with text, icons, or other visuals to make the meaning clear?
- Don't rely on the user being able to distinguish between colours. Imagine the page printed in black and white - can you still understand it?
- This is especially important in visualisations such as infographics, charts and graphs. Consider using Flourish to assist you with this type of content.
-
Link text: Do all links clearly describe the destination or what will happen when a person clicks them?
- Your link text should be meaningful and unique to that link - never use generic terms like 'click here' or 'more information'.
- Videos: Do all videos have captions and a transcript?
-
Forms: If a user makes a mistake completing a form or a transaction, are the errors identified? Is clear feedback provided to the user as to how to resolve the error?
- Make sure you mark the mandatory fields and consider the error text.
-
Images: Do informative and functional images have alt text? Do decorative images have blank alt text (alt="")?
- Not all images need alt text - if the image is purely decorative, and isn't necessary to understand the page content, you can mark it as decorative using empty alt text: alt="".
- If you do need to include alt text, make sure it accurately describe what's in the image - imagine you're describing it to someone over the phone.
-
Structure: Are your headings informative and marked up correctly?
- Headings act like a table of contents, especially for people using assistive technology like screen readers, so make sure they're meaningful and informative.
- Make sure your headings are marked as headings - don't just bold the text.
- Nest your headings correctly and logically - don't have an H3 without an H2.
- Never apply headings just to get a certain font size for visual effect - don't mark something a H4 just because you want it in a smaller font.
-
Text: Is your text easy to read and understand?
- Are you following the plain English guidelines?
- Check the reading age and aim for Grade 9 or below. Use Hemingway to check
-
Buttons and calls to action (CTAs): Is the label meaningful and active?
- Make sure it's clear to the user what will happen when they click the CTA.
- Use active text, especially for CTAs: 'Book now', not 'Bookings'.
More information on digital accessibility
To learn more about digital accessibility, visit the NSW Government Digital Accessibility and Inclusion Toolkit.
Need any more help?
If you have any questions, or require assistance with anything mentioned on this article, submit a request via the webform.