All WCAG 2.2 rules explained simply

WCAG 2.2 has 86 rules, called success criteria. Each rule explains one thing a website must be able to do. Choose a rule to see an example, a practical tip and a read-aloud option.

Looking for meaning rather than a keyword? Use the search by meaning.

Principle 1: Perceivable

Everyone must be able to take in the content with at least one sense: sight, hearing or touch.

Guideline 1.1: Text Alternatives

Everything that is not text gets a description in text.

  • 1.1.1Non-text Content

    Level A

    Images, icons, charts and other non-text content need a text alternative that serves the same purpose. Purely decorative images are hidden from assistive technology.

Guideline 1.2: Time-based Media

Audio and video need captions, descriptions or transcripts.

Guideline 1.3: Adaptable

Structure and meaning live in the code – not only in the looks.

  • 1.3.1Info and Relationships

    Level A

    What looks like a heading, list, table or form field must also be marked up that way in code. That is how assistive technology recognises structure.

  • 1.3.2Meaningful Sequence

    Level A

    The order in the code makes sense. A screen reader reads in code order – not the way things are arranged on screen.

  • 1.3.3Sensory Characteristics

    Level A

    Instructions do not rely only on shape, colour, size, position or sound. “Click the round button on the right” does not help someone who cannot see it.

  • 1.3.4Orientation

    Level AA

    Content works in portrait and landscape. Some people have their device fixed to a wheelchair and cannot rotate it.

  • 1.3.5Identify Input Purpose

    Level AA

    Form fields for personal data state in code what they expect. Then the browser can fill them in automatically.

  • 1.3.6Identify Purpose

    Level AAA

    The purpose of regions, buttons and links can be determined from code. Tools can then show familiar symbols or hide what is not essential.

Guideline 1.4: Distinguishable

Content is easy to see and hear: contrast, size, spacing.

  • 1.4.1Use of Color

    Level A

    Colour is never the only way to convey something. About one in twelve men has difficulty telling red from green.

  • 1.4.2Audio Control

    Level A

    Sound that starts by itself and plays for more than 3 seconds can be paused or turned down. Otherwise it drowns out the screen reader.

  • 1.4.3Contrast (Minimum)

    Level AA

    Text stands out clearly from its background: at least 4.5:1 for normal text and 3:1 for large text (24 px and up, or 18.66 px bold).

  • 1.4.4Resize Text

    Level AA

    Text can be enlarged to 200% without losing content or functionality.

  • 1.4.5Images of Text

    Level AA

    Text is real text, not a picture of text. Real text can be enlarged, recoloured and read aloud. Logos are exempt.

  • 1.4.6Contrast (Enhanced)

    Level AAA

    For especially good readability: at least 7:1 for normal text and 4.5:1 for large text.

  • 1.4.7Low or No Background Audio

    Level AAA

    Speech recordings have no background sounds or only very quiet ones – at least 20 decibels quieter than the speech.

  • 1.4.8Visual Presentation

    Level AAA

    People can set up blocks of text so they are comfortable to read: their own colours, at most 80 characters per line, not justified, line spacing of at least 1.5, larger paragraph spacing, and 200% enlargement without sideways scrolling.

  • 1.4.10Reflow

    Level AA

    At 320 CSS pixels wide (equal to 1280 pixels at 400% zoom) content can be read without scrolling in two directions. Exempt: content that needs two dimensions, such as data tables, maps and diagrams.

  • 1.4.11Non-text Contrast

    Level AA

    Controls and important graphics need contrast too: at least 3:1 for input borders, icons, focus rings and chart lines.

  • 1.4.12Text Spacing

    Level AA

    People can increase spacing without text being cut off or overlapping: line height 1.5 times, paragraph spacing 2 times, letter spacing 0.12 times and word spacing 0.16 times the font size.

  • 1.4.13Content on Hover or Focus

    Level AA

    Tooltips and pop-up content that appear on hover or focus can be dismissed (Esc), stay when the pointer moves onto them, and do not vanish on their own.

Principle 2: Operable

Everything must be usable – by keyboard, mouse, touch, voice or assistive technology, and without time pressure.

Guideline 2.1: Keyboard Accessible

Everything also works without a mouse.

  • 2.1.1Keyboard

    Level A

    Everything can be operated with the keyboard alone. Many people do not use a mouse: because of paralysis, tremor, blindness – or simply because it is faster.

  • 2.1.2No Keyboard Trap

    Level A

    Keyboard focus never gets stuck. Anyone who can tab into an area can also leave it with the keyboard.

  • 2.1.4Character Key Shortcuts

    Level A

    Shortcuts made of a single letter, digit or symbol can be turned off, changed, or are only active while the component has focus. Otherwise speech input or a slip triggers actions by accident.

Guideline 2.2: Enough Time

People get the time they need.

  • 2.2.1Timing Adjustable

    Level A

    Time limits can be turned off, adjusted or extended. Some people need much longer to read and type.

  • 2.2.2Pause, Stop, Hide

    Level A

    Anything that starts moving, blinking or scrolling on its own, lasts more than 5 seconds and is shown alongside other content can be paused, stopped or hidden. The same goes for content that updates itself automatically. Motion is highly distracting.

  • 2.2.3No Timing

    Level AAA

    There are no time limits at all. Exceptions are real-time events and media that simply play.

  • 2.2.4Interruptions

    Level AAA

    Interruptions such as pop-ups and notifications can be postponed or turned off. Only emergencies may interrupt.

  • 2.2.5Re-authenticating

    Level AAA

    If a session expires and people have to log in again, they lose no data and can continue where they left off.

  • 2.2.6Timeouts

    Level AAA

    People are told in advance how much inactivity leads to data loss – unless data is kept for more than 20 hours.

Guideline 2.3: Seizures and Physical Reactions

Nothing flashes or moves in a way that can make people ill.

  • 2.3.1Three Flashes or Below Threshold

    Level A

    Nothing flashes more than three times per second – or the flashing is small and dim enough to stay below the thresholds. Strong flashing can trigger epileptic seizures – this can be life-threatening.

  • 2.3.2Three Flashes

    Level AAA

    Nothing ever flashes more than three times per second – with no exception for small or dim areas.

  • 2.3.3Animation from Interactions

    Level AAA

    Motion effects triggered by scrolling or clicking can be turned off. Parallax and zoom effects can cause dizziness and nausea.

Guideline 2.4: Navigable

People can find their way and always know where they are.

  • 2.4.1Bypass Blocks

    Level A

    Repeated areas such as navigation can be skipped. Nobody should press Tab 30 times on every page to reach the content.

  • 2.4.2Page Titled

    Level A

    Every page has a title that describes its topic or purpose. It shows in the browser tab and is the first thing a screen reader announces.

  • 2.4.3Focus Order

    Level A

    With the Tab key, focus moves in a sensible order – usually top to bottom and left to right.

  • 2.4.5Multiple Ways

    Level AA

    There are at least two ways to find a page – for example navigation and search, or navigation and a sitemap. Pages that are a step in a process, such as checkout, are exempt.

  • 2.4.6Headings and Labels

    Level AA

    Headings and labels clearly say what something is about. Screen reader users jump from heading to heading to skim a page.

  • 2.4.7Focus Visible

    Level AA

    You can always see which element has keyboard focus. Without a visible focus, using a keyboard is like using a mouse without a pointer.

  • 2.4.8Location

    Level AAA

    People can tell where they are within the website.

  • 2.4.9Link Purpose (Link Only)

    Level AAA

    The link text makes sense entirely on its own – without the surrounding text. Screen readers can show links as a plain list.

  • 2.4.13Focus Appearance

    Level AAANew in 2.2

    The focus indicator is large and strong enough: at least the size of a 2 pixel border around the element, with 3:1 contrast between focused and unfocused states.

Guideline 2.5: Input Modalities

Using touch, pointers and motion is simple and forgiving.

  • 2.5.1Pointer Gestures

    Level A

    Functions that need multi-finger or swipe gestures also work with a simple tap or click.

  • 2.5.2Pointer Cancellation

    Level A

    An action fires on release, not on press. That way an accidental press can be cancelled by sliding away.

  • 2.5.3Label in Name

    Level A

    The visible text of a control is also part of its name in code. Otherwise voice control fails: “Click Send” does not find the button.

  • 2.5.4Motion Actuation

    Level A

    Functions triggered by shaking or tilting the device are also available as a button – and motion control can be turned off.

  • 2.5.7Dragging Movements

    Level AANew in 2.2

    Anything done by dragging can also be done with simple clicks. Dragging while holding is nearly impossible with a tremor or a mouth stick.

  • 2.5.8Target Size (Minimum)

    Level AANew in 2.2

    Click and tap targets are at least 24 × 24 CSS pixels – or have enough spacing that you do not hit the neighbour by accident.

Principle 3: Understandable

Text and behaviour must be clear and predictable. Mistakes are easy to avoid and to fix.

Guideline 3.1: Readable

Language is declared and text is understandable.

  • 3.1.1Language of Page

    Level A

    The main language of the page is set in code. Only then does a screen reader use the right pronunciation – otherwise English sounds as if read by a German voice.

  • 3.1.5Reading Level

    Level AAA

    If text is harder to read than expected after about 9 years of school, there is a simpler version or a summary.

  • 3.1.6Pronunciation

    Level AAA

    Where the meaning of a word depends on its pronunciation, the pronunciation is given.

Guideline 3.2: Predictable

Pages behave the way people expect.

  • 3.2.1On Focus

    Level A

    Just because an element receives focus, nothing unexpected happens: no page change, no new window, no submit.

  • 3.2.2On Input

    Level A

    Selecting or typing something does not automatically cause anything unexpected – unless people were told beforehand.

  • 3.2.5Change on Request

    Level AAA

    Major changes happen only when someone triggers them – or they can be turned off. No automatic redirects, no unrequested new windows.

  • 3.2.6Consistent Help

    Level ANew in 2.2

    If help options such as contact details, chat or FAQs appear on several pages, they are in the same order relative to other content on each page.

Guideline 3.3: Input Assistance

Forms help people avoid and correct mistakes.

  • 3.3.1Error Identification

    Level A

    When input is wrong, text says which field is affected and what is wrong. A red border alone is not enough.

  • 3.3.3Error Suggestion

    Level AA

    Error messages do not just say something is wrong, they also say how to get it right.

  • 3.3.5Help

    Level AAA

    Help for inputs and tasks is available right where it is needed.

  • 3.3.7Redundant Entry

    Level ANew in 2.2

    What someone has already entered in a process does not have to be typed again. It is pre-filled or offered for selection.

  • 3.3.8Accessible Authentication (Minimum)

    Level AANew in 2.2

    Logging in does not require a memory or thinking test: no typing a password from memory, no puzzle – unless there is an alternative or help. Still allowed at this level: recognising objects or content you provided yourself.

Principle 4: Robust

Content must work reliably with browsers and assistive technology such as screen readers – today and tomorrow.

Guideline 4.1: Compatible

Controls expose name, role and state to assistive technology.

  • 4.1.1Parsing

    Level ARemoved

    This rule was removed in WCAG 2.2. It required a few basics: properly closed and nested elements, no duplicate attributes and unique IDs. Modern browsers and assistive technology cope with such code errors; real problems are covered by other rules.

  • 4.1.2Name, Role, Value

    Level A

    Every control tells assistive technology what it is called (name), what it is (role) and what state it is in (value) – for example “Menu, button, expanded”.

  • 4.1.3Status Messages

    Level AA

    Messages such as “Saved”, “3 results” or “Added to cart” are announced by the screen reader without moving focus there.