Fount of Creativity
Free audit

Website accessibility: what WCAG 2.2 means for your business

A plain-English introduction to website accessibility and the WCAG 2.2 guidelines, with practical checks you can do yourself.

An accessible website is one that everyone can use, including people with low vision, colour blindness, hearing loss, limited movement or cognitive disabilities. It also helps people using a phone in bright sunlight, a slow connection, or one hand while holding a coffee.

Accessibility is the right thing to do, it widens your audience, and it often improves your search rankings and conversions along the way. Here’s what you need to know.

What is WCAG?

The Web Content Accessibility Guidelines (WCAG) are the international standard for web accessibility, published by the World Wide Web Consortium (W3C). The current version is WCAG 2.2.

The guidelines have three levels of conformance:

  • Level A: the minimum. Without these, some people can’t use your site at all.
  • Level AA: the level most organisations aim for, and the one usually referenced in policies and contracts.
  • Level AAA: the highest level, which isn’t usually required for a whole site.

When people talk about an “accessible website”, they normally mean one that meets WCAG 2.2 at Level AA.

The Disability Discrimination Act 1992 makes it unlawful to discriminate against people with disability when providing goods and services, and the Australian Human Rights Commission’s guidance makes clear this applies to websites. The Commission points to WCAG as the standard to follow.

We’re not lawyers, so talk to one if you need specific advice. But in practice, building to WCAG 2.2 AA is the sensible way to reduce your risk and do right by your customers.

The four principles

WCAG is built around four principles, often remembered as POUR:

  • Perceivable: people can see or hear the content. For example, images have text alternatives and videos have captions.
  • Operable: people can use the site however they navigate, including with a keyboard alone.
  • Understandable: content and controls behave in clear, predictable ways.
  • Robust: the site works with assistive technologies such as screen readers.

Quick checks you can do yourself

You don’t need special tools to spot many common problems.

Use only your keyboard

Put your mouse aside and press Tab to move through the page. Can you reach every link, button and form field? Can you always see where you are? Can you open the menu and close it again with Escape? If you get stuck, so will someone who can’t use a mouse.

Check your images

Every meaningful image needs alternative text that describes what it shows or does. Decorative images should have empty alt text so screen readers skip them. Logos should say the business name, and icons used as buttons should say what the button does.

Check colour contrast

Light grey text on a white background might look elegant, but many people can’t read it. WCAG AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Free contrast checkers will tell you the ratio for any two colours.

Also make sure colour isn’t the only way you show something, such as an error shown only in red.

Zoom in

Zoom your browser to 200%. Text should get bigger without being cut off or overlapping, and you shouldn’t have to scroll sideways to read a paragraph.

Fill in your forms

Every field should have a visible label, not just placeholder text that disappears when you start typing. Error messages should explain what went wrong and how to fix it.

Watch your headings

Headings should follow a logical order: one main heading, then sections and subsections. Screen reader users often jump between headings to find what they want, much like you’d skim a page.

What’s new in WCAG 2.2

WCAG 2.2 added several criteria that are especially relevant to modern sites, including:

  • Focus not obscured: the item you’ve tabbed to shouldn’t be hidden behind a sticky header or cookie banner.
  • Target size: buttons and links should be big enough to tap, at least 24 by 24 pixels, or have enough space around them.
  • Dragging movements: anything you can do by dragging should also be possible with a simple tap or click.
  • Accessible authentication: logging in shouldn’t rely on remembering or transcribing things, such as solving a puzzle, without an alternative.

Accessibility and speed go together

Many of the habits that make a site accessible also make it fast: clean HTML, less JavaScript, proper headings and images with set dimensions. That’s one reason we build every site to WCAG 2.2 AA as standard, alongside our speed targets. You can see how in our case studies.

Want a second opinion?

Run our free speed check, which includes an accessibility score from Google Lighthouse. Automated tools catch only some issues, so if you’d like a closer look at your site, get in touch.

Want to know how fast your site is?

Run a free Lighthouse check on your site, or tell us about a new project.