How to read WCAG 2.2 for your own site, the fixes that cover most real-world failures, a 30-minute manual test anyone can run, and how accessibility and usability overlap.
A WCAG compliant website meets the Web Content Accessibility Guidelines at a chosen level, and for almost every business that means WCAG 2.2 level AA. In practice, most sites fail on the same handful of issues: low color contrast, missing image alt text, unlabeled form fields, empty links and buttons, and things you cannot reach with a keyboard. Fix those and test with a keyboard and a screen reader, and you have covered a large share of what real users run into.
This guide explains how to read WCAG without getting lost, the fixes that matter most, and a 30-minute test you can do yourself.
How WCAG is structured
WCAG is published by the W3C. It is organised in layers:
Four principles, known as POUR: content must be Perceivable, Operable, Understandable and Robust.
Guidelines under each principle (for example, "Text Alternatives" or "Keyboard Accessible").
Success criteria under each guideline. These are the testable rules, each numbered (such as 1.4.3 Contrast) and given a level: A, AA or AAA.
Level A is the minimum. Level AA is the common target for legal and procurement requirements. Level AAA is stricter and not usually required for whole sites.
WCAG 2.2 became a W3C Recommendation in October 2023. It added criteria such as minimum target size, focus not being obscured, and accessible authentication, and it removed 4.1.1 Parsing as obsolete.
How to interpret WCAG for your own site
The spec reads like a standard, because it is one. A practical way through it:
Open the W3C's "How to Meet WCAG (Quick Reference)".
Filter it to level A and AA only.
For each criterion, read the linked "Understanding" page. It explains the intent in plain language, with examples of passing and failing.
Instead of testing every page, test your templates: home page, a standard content page, a blog post, a form, a product or checkout page. Fixing a template fixes every page built on it.
Record each issue with the criterion number, the page, and what a fix looks like.
The fixes that cover most real failures
1. Color contrast (1.4.3 and 1.4.11)
Normal text: at least 4.5:1 against its background.
Large text (about 24px regular, or 18.66px bold and larger): at least 3:1.
Interface components and meaningful graphics (button borders, input outlines, icons that convey information): at least 3:1.
Light grey placeholder text and white text on pale brand colors are the usual culprits. Check with WebAIM's contrast checker or your browser's dev tools.
2. Text alternatives for images (1.1.1)
Informative images get alt text describing what matters: alt="Technician replacing a furnace filter".
Decorative images get empty alt: alt="", so screen readers skip them.
Images of text (a flyer screenshot, a menu as a JPG) need the same text available as real text.
Linked images, such as a logo that goes home, describe the destination: alt="Acme Plumbing home".
3. Form labels and errors (1.3.1, 3.3.1, 3.3.2)
Every input needs a visible <label> linked to it. Placeholder text is not a label: it disappears when you type.
Error messages say what went wrong and how to fix it ("Enter a phone number with area code"), in text, not only a red border.
Required fields are marked in text or with an accessible indicator, not by color alone.
4. Keyboard access (2.1.1, 2.4.3, 2.4.7)
Every link, button, menu and form control must work with Tab, Shift+Tab, Enter and Space.
Focus order follows the visual order.
A visible focus indicator shows where you are. Removing the browser outline with outline: none and no replacement is a common failure.
Dropdown menus and modals must open, work and close from the keyboard, and modals should keep focus inside until closed.
5. Links and buttons with names (2.4.4, 4.1.2)
Icon-only buttons (a hamburger menu, a search magnifier, social icons) need an accessible name, via visible text, aria-label or hidden text.
Avoid a page full of "Click here" and "Read more" links. Make link text describe the destination, or give each one a distinct accessible name.
6. Structure and headings (1.3.1, 2.4.6)
One <h1> per page describing the page.
Headings in a logical order (h2 for sections, h3 inside them), not chosen for font size.
Use real lists, tables with header cells, and landmarks (<header>, <nav>, <main>, <footer>).
Set the page language: <html lang="en">.
7. New in WCAG 2.2, worth knowing
2.5.8 Target Size (Minimum), AA: clickable targets at least 24 by 24 CSS pixels, or enough spacing around smaller ones.
2.4.11 Focus Not Obscured (Minimum), AA: sticky headers, cookie banners and chat widgets must not completely hide the focused element.
3.3.8 Accessible Authentication (Minimum), AA: do not require solving puzzles or remembering information to log in without an alternative; allow password managers and paste.
3.3.7 Redundant Entry, A: do not make people re-type information they already gave in the same process.
8. Media and motion
Videos need captions (1.2.2); prerecorded video needs audio description or a text alternative for important visual content.
Anything that moves automatically for more than five seconds needs a way to pause it (2.2.2).
Respect the prefers-reduced-motion setting for large animations.
A 30-minute manual test
Automated tools catch only part of the picture. Add this routine for each key template.
Minutes 0 to 5: automated scan. Run WAVE (browser extension) or axe DevTools, or the accessibility section of Lighthouse. Fix clear errors like missing alt, missing labels and contrast failures.
Minutes 5 to 15: keyboard only. Put the mouse away. Tab through the page from the top.
Can you see where focus is at all times?
Can you open and close the menu, use every form field and submit?
Is there a "Skip to content" link, and does it work?
Does focus ever disappear behind a sticky header or banner?
Minutes 15 to 25: screen reader. Use VoiceOver (built into macOS and iOS) or NVDA (free on Windows).
Listen to the headings list. Does it describe the page?
Tab to images and buttons. Do they make sense out of context?
Fill the form. Is every field announced with its label? Are errors announced?
Minutes 25 to 30: zoom and reflow. Zoom the browser to 200% and then 400%. At 400%, content should reflow into one column without horizontal scrolling (1.4.10 Reflow), and nothing should be cut off.
Usability and accessibility overlap
People searching for "web usability accessibility" are right to group them. Almost every accessibility fix is a usability fix:
Accessibility fix
Who else it helps
Strong contrast
Anyone on a phone in sunlight
Visible labels
Anyone filling a form in a hurry
Captions
People watching with the sound off
Keyboard support
Power users, people with a broken trackpad
Bigger tap targets
Everyone on mobile
Clear error messages
Everyone who makes a typo
Overlays, statements and the law
Overlays: widgets that promise one-line compliance do not change your underlying code. Fix the site itself.
Accessibility statement: publish a short page saying which standard you target, known issues, and how to contact you for help or alternative formats.
Legal context: requirements vary by country. The European Accessibility Act applies to many products and services in the EU from June 2025; in the US, the ADA is frequently applied to websites; public sector bodies often have specific rules. Get legal advice for your situation.
Checklist
[ ] Contrast: 4.5:1 text, 3:1 large text and UI parts
[ ] Alt text on informative images, empty alt on decorative ones
[ ] Every input has a visible, linked label
[ ] Whole site works by keyboard with visible focus
[ ] Icon buttons have accessible names
[ ] Logical headings and landmarks, page language set
[ ] Tap targets at least 24 by 24 CSS pixels
[ ] Captions on video, pause control on motion
[ ] Reflows at 400% zoom
[ ] Accessibility statement published
Accessibility also supports search: headings, alt text and descriptive links are on-page SEO basics too, covered in our on-page SEO checklist.
We.Inc generates sites as standard HTML, CSS and React code that you can edit directly, so you can fix labels, alt text and contrast yourself or ask for the changes in chat. Always run the manual checks above on whatever you publish.
What does it mean for a website to be WCAG compliant?
It means the site meets the success criteria of the Web Content Accessibility Guidelines at a chosen level, usually WCAG 2.1 or 2.2 level AA. Level AA includes every level A and AA criterion. Most laws and procurement policies that reference WCAG ask for level AA.
How should I interpret WCAG guidelines for my site?
Start with the W3C's 'How to Meet WCAG' quick reference, filter to level A and AA, and for each criterion read the 'Understanding' page, which explains the intent in plain language. Then test your key templates (home, a content page, a form, checkout) rather than every page individually.
Can an accessibility overlay or plugin make my site compliant?
No tool can make a site compliant on its own. Overlays that add a toolbar do not fix the underlying code, and many disabled users and accessibility specialists report that they get in the way. Fix the HTML, contrast, labels and keyboard support directly.
What is the difference between usability and accessibility?
Accessibility means people with disabilities can perceive, understand, navigate and interact with the site. Usability means the site is easy and efficient for everyone. They overlap heavily: clear labels, good contrast and predictable navigation help all visitors, not only disabled ones.
Do automated checkers find all accessibility issues?
No. Tools like WAVE, axe and Lighthouse catch issues such as missing alt text, low contrast and missing labels, but many criteria, like whether alt text is meaningful or whether focus order makes sense, need a human to check.
How we research, test and update this page: our editorial policy. We.Inc is our own product.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.
Product
AI Website Builder: Describe a site in plain English; it's live in minutes