Simple W3C Accessibility Checks

Posted by

Simon Truckle

on 04 May 2022

Making digital content accessible can be a daunting task. So we have a quick checklist to help you get started or benchmark existing content.

Simple Online Accessibility Checks

Disabilities are diverse. It sounds obvious, but it is often forgotten. Accessibility is commonly stereotyped and oversimplified. When thinking about online content, it evokes an image of a user requiring a screen reader.

"Disability is not just a health problem. It is a complex phenomenon, reflecting the interaction between features of a person’s body and features of the society in which he or she lives."World Health Organisation

How to quickly check online accessibility

The World Wide Web Consortium (W3C) is an international community where Member organisations, a full-time staff, and the public work together to develop Web standards.

It's worth bearing in mind that many of the checks below are either similar or identical to those used in Search Engine Optimisation (SEO). As a result, you may find this checklist much less of a burden than you think in terms of web content.

Much will already be covered if your web/marketing team is practising SEO (as they should be!). So, if you are trying to sell the need for accessibility internally, remember it's good for traffic, it's good for usability, and it's the law!

W3C has created a set of easy accessibility checks for your content.

  1. Page title
  2. Image text alternatives
  3. Text
  4. Interaction
  5. General

Free Online Accessibility Webinar

W3C easy accessibility checks

1. Check page titles for accessibility

Good page titles are essential for orientation. They help people know where they are and move between pages open in their browser.

The first thing screen readers say when the user goes to a different web page is the page title. The best practice is for titles to be "front-loaded" with the important and unique identifying information at the beginning.

E.g. Accessibility in E-learning | Skillcast

What to check

  • Check that the title briefly and adequately describes the page content
  • Check that the title is different from other pages on the website
  • Check that the title adequately distinguishes the page from other web pages

2. Check for image text alternatives (alt-text)

Text alternatives are needed for those who do not see the image (e.g. people who are blind and use screen readers can hear the alt text read out loud).

The text alternatives on digital content are derived from the "alt-text". They need to convey the purpose of an image, including pictures, illustrations, charts, etc.

They need to be functional and provide an equivalent user experience, not necessarily describing the image. Most SEO and CMS tools will allow you to generate lists of assets that lack an "alt-text".

E.g. Alt-text for a search button would be "search", not "magnifying glass".)

What to check

  • Every image has appropriate alternative text.

Online Accessibility Checklist

3. Text

Text alternatives are needed for those who do not see the image (e.g. people who are blind and use screen readers can hear the alt text read out loud).

Heading checks

Those who cannot use a mouse and use only the keyboard or use a screen reader need correctly marked-up headings to navigate.

  • All pages have at least one heading.
  • Make sure all headings carry a heading tag (i.e. don't use font size or bolding)
  • Only use headings where the text delineates a section
  • The heading hierarchy is meaningful. Ideally, start with an "H1" then descend the levels in numerical order

Colour contrast checks

Some people cannot read content without sufficient contrast between the text and background, such as light grey text on a light background. Others, including some people with reading disabilities such as dyslexia, need low luminance.

Three ways to check contrast
  • Contrast tool - displaying contrast ratios in a table
  • Eye-dropper tool - to select colours
  • Turn off colour - converts page to grayscale

WebAIM has a great free contrast checker.

Text re-sizing

Some people need to enlarge web content to read it. Others may need to change other aspects of text display: font, line spacing, and more.

  • Make sure your website and emails have responsive design baked in.

POUR Accessibility Guidelines

4. Interaction

Many people cannot use a mouse and rely on the keyboard to interact with online content. People who are blind and some sighted people with mobility impairments rely on the keyboard or on assistive technologies and strategies that rely on keyboard commands, such as voice input.

Accessible websites enable people to access all content and functionality via links, forms, and media controls through their keyboard.

E.g. Alt-text for a search button would be "search", not "magnifying glass".)

Keyboard access & visual focus check

  • Tab to all - Check you can tab to every element.
  • Tab away - Ensure elements don't have a "keyboard trap".
  • Tab order - Ensure it is logical.
  • Visual focus - Ensure it is clear which content is in focus.
  • All functionality by keyboard - Ensure that you can do everything with it.
  • Drop-down lists - Check that you can use arrows without selecting.
  • Image links - Have a clear visual focus and click enter to activate.

Forms, labels, and errors

When forms, labels and error messages are marked up correctly, people can interact with them using only the keyboard or voice input and screen readers.

Also, the label itself becomes clickable, increasing the target area and making it easier to select small radio buttons or checkboxes.

  • Check that all form controls are keyboard accessible, including that you can reach all items in any drop-down list.

Barclays Accessibility Case Study5. General

The text alternatives on digital content are derived from the "alt-text". They need to convey the purpose of an image, including pictures, illustrations, charts, etc.

Check your moving, flashing, or blinking content

Users need to be able to control moving content, especially those with attention deficit disorder or visual processing disorders.

  • Ensure there is a way to stop or hide any moving, blinking, or scrolling content
  • Provide a way to stop, hide or change the frequency of auto-updated information
  • Check that no content flashes or blinks more than three times in one second

Provide multimedia (video, audio) alternatives

Visual information cannot be seen by those who are blind or have low vision unless provided in an alternative format such as audio or text.

  • Keyboard access - See section 4. Interaction
  • Auto-start control - either does not start automatically or can be controlled.
  • Captions - This is more than just subtitles. Identify people and describe visuals.
  • Transcript - It should be easy to access full descriptions (see captions).
  • Audio description - This describes any meaningful visuals.

Check that the basic structure makes sense

A basic structure check helps ensure that the page flows and makes sense. The easiest way to do this is by checking the web page without images, styles, and layout.

  • Check that the information makes sense when read in the order it is shown
  • Check that the alternative text adequately reflects the missing images
  • Check that blocks of information have clear headings

Read the full POUR guidelines

Next steps for accessibility

Current Web Content Accessibility Guidelines (WCAG 2.0) stipulate that e-learning content must be POUR:

  • Perceivable - Information and user interface components must be presentable to users in ways they can perceive
  • Operable- User interface components and navigation must be operable
  • Understandable - Information and the operation of the user interface must be understandable
  • Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of assistive technologies

If you want to bring your accessibility levels to the next level, follow POUR guidelines to ensure that your online content is accessible to all learners.

Click me

Want to learn more about equality & compliance?

If you'd like to stay up to date with equality best practices, industry insights and key trends across regulatory compliance, digital learning, EdTech, and RegTech news, subscribe to Skillcast Compliance Bulletin.

To help you navigate the compliance landscape, we have collated searchable glossaries of key terms and definitions across complex topics, including GDPR, Equality, Financial Crime and SMCR. We also regularly report key learnings from recent discrimination cases.

You can follow our ongoing YouGov research into compliance issues, attitudes and risk perceptions in the UK workplace through our Compliance Insights blogs.

And if you're looking for a compliance training solution, why not visit our Compliance Essentials Course Library.

Last but not least, we have 80+ free compliance training aids, including assessments, best practice guides, checklists, desk aids, eBooks, games, handouts, posters, training presentations and even e-learning modules!

If you've any questions or concerns about compliance or e-learning, please get in touch.

We are happy to help!

Compliance Essentials

Compliance Essentials Library is our best-selling comprehensive corporate training solution.

100+ e-learning and microlearning courses that help companies from SMEs to multinationals achieve compliance success.

Start a Free Trial