What is WCAG? Levels, criteria and what audits check
WCAG is the W3C's Web Content Accessibility Guidelines: testable success criteria at levels A, AA and AAA. What it covers, and what audits cannot.
WCAG, the Web Content Accessibility Guidelines, is the W3C standard for making web content accessible to people with disabilities, written as testable success criteria at three levels: A, AA and AAA.
WCAG 2.2 was published in October 2023 and is the current version. Each success criterion is a statement that content passes or fails, such as text having a contrast ratio of at least 4.5:1, and sits under a guideline grouped by four principles: perceivable, operable, understandable and robust. Level A is the lowest and AAA the highest. W3C also publishes an Understanding document and sufficient techniques for each criterion, which explain the intent and show ways to meet it.
Category: Accessibility
Why it matters
Accessibility barriers are specific. A form field with no label, a button with no name, text too faint to read, a page that cannot be zoomed or a carousel that traps the keyboard each shuts out a group of people. WCAG gives teams a shared, checkable definition of the bar. The standard itself says it is meant for places where conformance testing is needed, such as design specifications, purchasing, regulation and contracts.
How squirrelscan checks it
The accessibility rules are hand-written checks that cover part of WCAG. They are not axe-core and they are not a conformance test. W3C’s guidance on evaluation tools says tools cannot check every accessibility aspect automatically, and that human judgement is required. Many criteria, such as whether alt text is meaningful or a page can be used with a keyboard, need a person.
The rules read the HTML and inline styles, and the <style> blocks where a rule needs them. They do not read external stylesheets. Several examples: a11y/color-contrast measures only text whose colors are both set inline. a11y/form-labels fails form controls with no label. a11y/link-text flags empty and generic links. a11y/heading-order flags skipped heading levels, and a11y/html-lang-valid checks the page language. a11y/touch-targets reads inline sizes against 44 pixels. images/alt-text reports images with no alt. A clean audit means these checks found nothing, not that the site conforms to WCAG.
| Rule | What it flags | Severity |
|---|---|---|
| Color contrast: the 4.5:1 rule and how to check it | Light gray text on white fails WCAG AA. squirrel measures the contrast of text whose color and background are both set inline, and reports pairs under 4.5:1. | warning |
| Form labels: which inputs need one and how to check | An input labelled only by its placeholder loses its label the moment someone types. squirrel lists every unlabeled input, textarea and select. | error |
| Link text: why ‘click here’ fails and what to use | Links reading ‘click here’, and links wrapping an unlabeled icon, give screen reader users nothing to go on. squirrel lists both kinds. | warning |
| Heading order: why skipping from h1 to h3 matters | Screen reader users navigate by heading level, and a skipped level makes the outline harder to follow. squirrel checks document order on every page. | warning |
| html lang: valid values and what a missing one breaks | Without a lang attribute a screen reader guesses the pronunciation, often wrongly. squirrel checks the html element on every page. | error |
| Touch target size: the 24 and 44 pixel minimums | Buttons and links smaller than a fingertip are hard to hit on a phone. squirrel flags interactive elements sized below 44 pixels inline. | warning |
| Missing alt attribute: what an empty alt means | An image with no alt attribute has no name for a screen reader. An empty alt is the correct way to say decorative, and squirrel accepts it. | warning |
How to fix it
Fix what the rules report, then test what they cannot see, with a keyboard, a screen reader and the browser’s zoom:
<html lang="en-GB">
<label for="email">Email address</label>
<input id="email" type="email" autocomplete="email">
</html>Give every control a label and every page a language (the labels fix, the language fix). Check contrast in the rendered page, since most colors live in stylesheets (the contrast fix). Name links by their destination (the link text fix). For a conformance claim, run a manual evaluation against the success criteria.
Run the check
squirrel audit https://example.com --rule-include a11y/color-contrast,a11y/form-labels,a11y/link-text,a11y/heading-order,a11y/html-lang-valid,a11y/touch-targets,images/alt-textA signed-out local audit costs nothing.
Related terms
- ARIA: Accessible Rich Internet Applications: roles, states and properties that describe custom widgets to assistive technology.
- Accessible name: The name assistive technology announces for an element, computed from its content, label, aria-label or aria-labelledby.
- Color contrast ratio: The luminance ratio between text and its background; WCAG AA asks for 4.5:1 for body text and 3:1 for large text.