WCAG 2.2 Checklist: Make Your Website Compliant

Web accessibility means a website can be used by everyone, including users with visual, auditory, motor, or cognitive differences. The global reference in this field is WCAG (Web Content Accessibility Guidelines), published by the W3C. WCAG 2.2 is the current version of this standard and adds new success criteria to earlier versions. In this article we turn WCAG 2.2 into an understandable checklist.

Why Does WCAG Matter?

Accessibility is not merely a matter of goodwill. A significant share of the population lives with a permanent or temporary disability, and an inaccessible site shuts these users out. Beyond that, accessible design also improves SEO, usability, and the overall user experience.

In Europe, accessibility is a legal requirement for the public sector and, increasingly, for private organisations. The European standard EN 301 549 defines accessibility requirements for information and communication technology products and directly references WCAG for web content. In other words, complying with WCAG forms the basis of EN 301 549 compliance.

The Four Core Principles: POUR

All of WCAG is organised around four core principles, known by their initials as POUR:

• Perceivable: Content and the interface must be presented in ways users can perceive. If a visually impaired user cannot 'see' an image, that image must have a text alternative.
• Operable: Interface components and navigation must be usable. Someone who cannot use a mouse must be able to reach every function via keyboard.
• Understandable: The content and the interface's operation must be understandable. Text must be readable and behaviour predictable.
• Robust: Content must be robust enough to be reliably interpreted by a wide range of tools, including assistive technologies.

Every success criterion belongs to one of these four principles. This structure turns accessibility from a scattered pile of rules into a meaningful framework.

Conformance Levels: A, AA, and AAA

WCAG success criteria are divided into three conformance levels:

In practice, the level to aim for is generally AA. Level A alone is insufficient, while achieving AAA across an entire site is often neither feasible nor required. Regulations like EN 301 549 are essentially based on level AA.

Success-Criteria Checklist by Principle

Below you will find the most commonly encountered success criteria, grouped by the POUR principles as practical checks.

Perceivable

• Text alternatives: Provide alt text for all meaningful images; mark decorative images with empty alt.
• Colour contrast: Ensure at least 4.5:1 for normal text and at least 3:1 for large text (AA).
• Don't rely on colour alone: Do not convey information by colour only; support it with icons, labels, or patterns.
• Time-based media: Provide captions for videos and transcripts for audio content.
• Reflow: Content must be readable at 400% zoom without requiring horizontal scrolling.

Operable

• Keyboard access: All functions must be usable by keyboard alone, with no keyboard traps.
• Visible focus: The keyboard focus must always be clearly visible (focus indicator).
• Target size: Interactive targets must be large enough (WCAG 2.2 recommends a minimum of 24x24 CSS pixels for AA).
• Time limits: For timed operations, give users a way to extend or turn off the limit.
• Skip link: Offer a 'skip to content' link to bypass repeated content.

Understandable

• Page language: Declare the page's language (lang) on the html element.
• Form labels: Every form field must have a clear, programmatic label.
• Error identification: Identify errors clearly and offer suggestions for correction.
• Consistent navigation: Menus and navigation items must stay consistent across pages.
• Predictable behaviour: Focus or input must not trigger an unexpected change of context.

Robust

• Valid markup: Correctly nested and closed HTML matters for assistive technologies to interpret it accurately.
• Name, role, value: The name, role, and state of custom components must be conveyed to screen readers correctly via ARIA.
• Status messages: Dynamic status messages must reach screen readers without moving focus.
• Heading structure: Use headings (h1-h6) in a logical, hierarchical order.

Step-by-Step Implementation Roadmap

1. Scan the current state. Use an automated accessibility scan to find contrast, alt text, and label gaps.
2. Navigate by keyboard. Put the mouse aside; try using your site end to end with the keyboard only.
3. Fix headings and structure. Establish a meaningful heading hierarchy and correct markup.
4. Improve contrast and target sizes. Bring colour ratios and clickable areas up to the AA threshold.
5. Strengthen forms and errors. Review labels, error messages, and focus management.
6. Test with a screen reader. Experience critical flows with a screen reader.
7. Monitor continuously. Make accessibility a regular audit cycle, not a one-off task.

Example Scenario

'AkademiNet', an education platform, used a visually attractive but inaccessible design on its course registration form. Required fields were marked with red colour only, and form labels were embedded in placeholder text. A keyboard user, meanwhile, could not see the focus indicator.

Following user feedback, the team ran an accessibility audit. The issues were mapped to the POUR framework: signalling a requirement by colour alone was a 'perceivable' violation; the invisible focus undermined the 'operable' principle; and labels embedded in placeholders harmed the 'understandable' principle.

AkademiNet added text labels to required fields, bound a persistent, programmatic label to each field, defined a visible focus indicator, and enlarged the touch targets. After the audit, the form reached level AA and became seamlessly usable for keyboard and screen reader users.

Frequently Asked Questions

Which conformance level should I target?

For most organisations and regulations, the practical target is level AA. A alone is insufficient, while AAA is often unattainable across an entire site. AA is therefore a safe and reasonable target.

Is WCAG 2.2 very different from 2.1?

WCAG 2.2 adds new success criteria on top of 2.1, with improvements especially around focus visibility, target size, and navigation. A site compliant with 2.1 can move to 2.2 relatively easily by meeting the additional criteria.

What is the relationship between EN 301 549 and WCAG?

EN 301 549 is a European standard that references WCAG directly for web content accessibility. So achieving WCAG AA conformance is a fundamental step toward meeting the web requirements of EN 301 549.

Is an automated scan enough on its own?

No. Automated tools quickly catch many issues such as contrast, missing alt, and labels, but matters like keyboard usability, focus order, and the screen reader experience require manual testing. The best results come from combining automated and manual testing.

This content is for general information purposes only and does not constitute legal advice.

With JUS. you can scan your website for free to see your accessibility issues grouped by the POUR principles and map out your roadmap toward the WCAG 2.2 AA target.