WCAG 2.1 & 2.2 Compliance Guide

What is WCAG?

WCAG stands for the Web Content Accessibility Guidelines. It is a rulebook for accessible websites. A group called the W3C makes it. WCAG is the main accessibility rulebook in the world. Almost every accessibility law points back to it.

WCAG is built on four big ideas. They use the short word POUR:

• Perceivable: people can see or hear your content. Add alt text to images. Add captions to videos. Use clear text with good contrast.
• Operable: people can use the site with a keyboard. Menus are easy. Nothing flashes in a way that causes seizures.
• Understandable: the site is easy to figure out. Words are clear. Buttons do what they say. Forms help with mistakes.
• Robust: the site works with screen readers and other helper tools.

Each big idea has smaller groups of rules. Each rule is rated at one of three levels: A (basic), AA (normal target), or AAA (highest).

Levels A, AA, and AAA

• Level A - the basic level. If you fail Level A, some people cannot use your site at all.
• Level AA - the normal target. This is what laws like the ADA, EAA, and Section 508 ask for.
• Level AAA - the highest level. It is not possible for every page, so most sites aim for AA.

WCAG 2.1 vs WCAG 2.2

WCAG 2.1 (June 2018)

WCAG 2.1 added 17 new rules on top of WCAG 2.0. The new rules focus on three things: mobile, low vision, and thinking or learning needs. Most laws today point to WCAG 2.1 AA.

WCAG 2.2 (October 2023)

WCAG 2.2 adds nine new rules and drops one old one. It focuses on mobile, low vision, and thinking or learning needs. New rules include:

• Focus Not Covered (AA): when you tab to an item, nothing should hide it.
• Focus Appearance (AAA): the keyboard focus ring should be easy to see.
• Dragging (AA): anything you drag should also work with a single tap or click.
• Target Size (AA): buttons and links must be at least 24 by 24 pixels.
• Consistent Help (A): help should be in the same spot on every page.
• Redundant Entry (A): do not make people type the same info twice.
• Accessible Login (AA): login steps should not need memory tricks that block some users.

WCAG 2.2 works with everything in 2.1. If your site meets 2.2, it meets 2.1 too. So 2.2 AA is a smart target for the future.

Key WCAG AA rules you cannot skip

• Alt text (A): images need a text description. Form fields need labels.
• Real headings and lists (A): use real HTML, not fake text styles.
• Contrast (AA): normal text needs 4.5 to 1 contrast. Large text needs 3 to 1.
• Resize text (AA): text must still work when you zoom to 200%.
• Reflow (AA): the page must work at 320 pixels wide without side-scrolling.
• Text spacing (AA): users can space out text without breaking the layout.
• Keyboard (A): everything must work without a mouse.
• Focus visible (AA): you must see where you are on the page.
• Target size (AA, new in 2.2): buttons and links must be at least 24 by 24 pixels.
• Labels (A): every form field needs a clear label.
• Custom controls (A): custom buttons must work with screen readers.

How NeuroText helps with WCAG

NeuroText is not a magic fix. WCAG conformance depends on your code. What NeuroText does is give every visitor easy controls. Those controls help with many AA rules and make your site easier to use.

• Contrast: users can turn up contrast and pick color tints.
• Text size and spacing: users can change font size, line height, and spacing.
• Dyslexia fonts: easy-to-read fonts.
• Motion: users can pause animations and turn off movement.
• Page outline: a list of sections to help users jump around fast.
• Text to speech: more than 20 voices read your page out loud.
• Page summary: AI can shorten long pages into a quick summary.

How to get started with WCAG

• Pick a target. For most teams, WCAG 2.2 Level AA is the right goal.
• Run free tools like axe or Lighthouse to catch the easy issues.
• Test by hand. Try the site with only a keyboard. Try it with a screen reader. Zoom to 200%. Check it at 320 pixels wide.
• Fix the code first (headings, labels, focus, contrast). Then add a widget.
• Post an accessibility statement with a way for users to reach you.
• Test again often. New features can break old fixes.

Common questions

What is WCAG?

WCAG stands for Web Content Accessibility Guidelines. It is a rulebook made by the W3C, a group that makes web standards. It is the main accessibility rulebook in the world. Laws like the ADA, EAA, and Section 508 all point back to it.

What is the difference between WCAG 2.1 and 2.2?

WCAG 2.2 came out in October 2023. It is the newer version. It adds nine new rules for mobile, low vision, and thinking or learning needs. It also drops one old rule. WCAG 2.2 works with everything in 2.1, so moving up is safe.

What does Level AA mean?

WCAG has three levels: A is the basic level, AA is the normal target, and AAA is the highest level. Level AA is what most laws ask for, including the ADA, EAA, and Section 508.

Which WCAG version should we use?

For most teams, WCAG 2.2 Level AA is the best target. It works with 2.1 AA, which is what most laws ask for today. It also gets you ready for when laws update in the future.

Can a widget make my site fully WCAG compliant?

No. Full WCAG conformance depends on your code and content. A widget like NeuroText adds helpful controls that cover many AA rules. It makes your site easier to use. But it does not replace good code, alt text, or keyboard support.

This page is for general info only. WCAG is a tech standard, not a law on its own. For legal questions, talk to a lawyer.