WCAG 2.2 Explained Simply

Non-text Content

Every image, icon, chart, or video needs descriptive text that explains what it shows. Decorative images should be marked as decorative so screen readers skip them.

Audio-only and Video-only (Prerecorded)

Audio-only content needs transcripts, and silent videos need descriptions of what's happening.

Captions (Pre-recorded)

All videos need captions that show what people are saying and important sounds, so deaf and hard-of-hearing people can understand the content.

Audio Description or Media Alternative (Prerecorded)

Videos need either audio descriptions of visual content or a complete text alternative so blind people can understand what's happening.

Captions (Live)

Live videos, webinars, and broadcasts need real-time captions so deaf and hard-of-hearing people can follow along.

Audio Description (Prerecorded)

Videos need audio descriptions of visual content so blind people can understand what's happening on screen.

Sign Language (Prerecorded)

Provide sign language interpretation for videos to serve deaf users whose primary language is sign language.

Extended Audio Description (Prerecorded)

When videos are too packed with dialogue for audio descriptions, provide extended versions with pauses for more detailed descriptions.

Media Alternative (Prerecorded)

Provide complete text alternatives for all videos that include everything someone would get from watching and listening.

Audio-only (Live)

Live audio broadcasts need text alternatives like real-time transcription so deaf people can follow along.

Info and Relationships

Use proper HTML tags so that screen readers and other tools can understand your content structure.

Meaningful Sequence

Make sure content appears in a logical order that makes sense when read by screen readers or when CSS styling is removed.

Sensory Characteristics

Don't tell people to 'click the red button' or 'use the menu on the right' - include other ways to identify things.

Orientation

Your website should work in both portrait and landscape modes unless there's a really good reason it can only work one way.

Identify Input Purpose

Form fields should tell browsers what kind of information they're asking for so autocomplete and assistive technology can help users.

Identify Purpose

Use proper markup so assistive technology can understand what different parts of your interface are for.

Use of Color

Don't use only color to show important information - also use text, icons, or patterns so colorblind people can understand it too.

Audio Control

Don't auto-play audio that lasts more than 3 seconds unless you give people a way to stop it or turn it down.

Contrast (Minimum)

Your text needs to be dark enough against its background so people can read it easily. Small text needs stronger contrast than large text.

Resize Text

People should be able to zoom in on your text up to 200% and still be able to read everything and use all features.

Images of Text

Use real text instead of pictures of text whenever possible, so people can resize it, change colors, and screen readers can read it.

Contrast (Enhanced)

For the highest accessibility level, text should have very strong contrast (7:1 ratio) against its background.

Low or No Background Audio

In audio content, background music or sounds should be much quieter than speech or able to be turned off completely.

Visual Presentation

Allow people to customise how text looks (colours, width, spacing) so they can read it more easily.

Images of Text (No Exception)

Use real text instead of images of text whenever possible so people can customize how it looks and screen readers can access it.

Reflow

Your content should work well on small screens and when zoomed in, without needing to scroll both horizontally and vertically at the same time.

Non-text Contrast

Buttons, form fields, and important graphics need enough contrast against their background so people can see them clearly.

Text Spacing

Your text should still be readable and usable when people increase line spacing or letter spacing to help them read better.

Content on Hover or Focus

When extra content appears on hover or focus (like tooltips), make sure people can dismiss it, move their pointer over it, and that it stays visible long enough to read.

Keyboard

Everything that works with a mouse must also work with just keyboard keys like Tab, Enter, and arrow keys.

No Keyboard Trap

People using only keyboard should never get stuck in one part of your page with no way to get out.

Character Key Shortcuts

Single-key shortcuts (like pressing 'S' to search) should be avoidable because they can interfere with assistive technology.

Timing Adjustable

If your website has time limits, give people a way to turn them off, extend them, or adjust them before time runs out.

Pause, Stop, Hide

Give people controls to pause or stop any content that moves, blinks, scrolls automatically, or updates frequently.

No Timing

Don't use time limits unless they're absolutely necessary for the content to work (like live events or video).

Interruptions

Let people turn off or delay interruptions like notifications, alerts, or pop-ups unless it's a true emergency.

Re-authenticating

If someone's login session expires, they should be able to log back in and continue where they left off without losing their work.

Timeouts

Warn people how long they can be inactive before losing their work, unless their data is saved for at least 20 hours.

Three Flashes or Below Threshold

Don't include content that flashes more than 3 times per second, as this can trigger seizures in people with photosensitive epilepsy.

Three Flashes

This is a stricter version of the Level A requirement - absolutely no content should flash more than 3 times per second.

Animation from Interactions

Give people a way to turn off animations that are triggered by scrolling, hovering, or other interactions, unless the animation is absolutely necessary.

Bypass Blocks

Add a 'skip to main content' link so people don't have to tab through the same navigation on every page.

Page Titled

Every page needs a clear title that describes what the page is about, so people know where they are on your website.

Focus Order

When someone presses Tab to move through your page, the focus should go in an order that makes sense.

Link Purpose (In Context)

Make your link text descriptive so people know where the link will take them before they click it.

Multiple Ways

Provide multiple ways for people to find pages on your website, like search, navigation menus, sitemaps, or related links.

Headings and Labels

Make your headings and labels descriptive so people can quickly understand what each section or form field is about.

Focus Visible

When people navigate with a keyboard, they need to see where they are on the page - there should always be a visible focus indicator.

Location

Help people understand where they are in your website with breadcrumbs, site maps, or other location indicators.

Link Purpose (Link Only)

Link text should make sense on its own without needing surrounding context to understand where the link goes.

Section Headings

Use clear headings to break up your content into logical sections so people can understand and navigate the page structure.

Focus Not Obscured (Minimum)

When someone tabs to an element, make sure it's not completely hidden behind other content like sticky headers or pop-ups.

Focus Not Obscured (Enhanced)

This is the strictest focus visibility rule - when someone tabs to an element, absolutely none of it should be hidden behind other content.

Focus Appearance

Keyboard focus indicators should be large and high-contrast enough to be easily seen by everyone.

Pointer Gestures

Don't require complex gestures like pinch-to-zoom or drawing patterns - provide simple tap or click alternatives for all functions.

Pointer Cancellation

Give people a way to cancel or undo actions they trigger accidentally, especially important actions like deleting or purchasing.

Label in Name

When buttons or links have visible text, that same text should be available to assistive technology.

Motion Actuation

Features controlled by shaking, tilting, or moving your device should also have button alternatives for people who can't use motion.

Target Size

Make buttons and clickable areas large enough (at least 44x44 pixels) so people can easily tap or click them.

Concurrent Input Mechanisms

Don't prevent people from using different input methods (touch, mouse, keyboard, voice) at the same time or switching between them.

Dragging Movements

Features that require dragging (like drag-and-drop or sliders) should also work with single clicks or taps.

Target Size (Minimum)

Clickable areas should be at least 24x24 pixels to be easily tappable, especially on mobile devices.

Language of Page

Tell assistive technologies what language your page is written in so they can pronounce words correctly.

Language of Parts

When you use words or phrases in a different language than the main page language, mark them so screen readers can pronounce them correctly.

Unusual Words

When you use technical terms, jargon, or words in unusual ways, provide definitions or explanations so everyone can understand.

Abbreviations

Provide the full form of abbreviations and acronyms so people know what they stand for.

Reading Level

If your content is written at a high reading level, provide simpler alternatives or supplementary explanations.

Pronunciation

When words could be pronounced different ways and that changes their meaning, provide pronunciation guidance.

On Focus

Don't automatically redirect people or change the page content just because they focused on something - wait for them to actively choose an action.

On Input

Don't automatically submit forms or redirect users just because they selected something - wait for them to explicitly submit or navigate.

Consistent Navigation

Keep your navigation menu in the same order on every page so people can predict where to find things.

Consistent Identification

Use the same icons, labels, and descriptions for similar functions throughout your website.

Change on Request

Don't surprise people by changing the page context automatically - let them control when changes happen.

Consistent Help

If you provide help options like contact info or help links, put them in the same location on every page.

Error Identification

When someone makes a mistake on a form, clearly tell them what went wrong and where the problem is.

Labels or Instructions

Every form field needs a clear label or instructions so people know what information to enter.

Error Suggestion

When someone makes a mistake on a form, don't just say it's wrong - tell them how to fix it.

Error Prevention (Legal, Financial, Data)

Important actions like purchases or deleting data should include confirmation steps or ways to undo mistakes.

Help

Provide helpful guidance and instructions when people need help with forms or complex tasks.

Error Prevention (All)

For any form submission, provide ways to check, correct, or undo mistakes before they become permanent.

Redundant Entry

Don't make people re-enter information they've already provided in the same session or process.

Accessible Authentication (Minimum)

Don't require memory tests, puzzles, or calculations for login unless you provide help like password managers or alternative methods.

Accessible Authentication (Enhanced)

This is the strictest level - absolutely no memory tests, puzzles, or cognitive challenges for authentication.

Parsing

Write clean, valid HTML code so assistive technologies can understand and process your content properly.

Name, Role, Value

Make sure assistive technologies can understand what each interactive element is, what it's called, and what state it's in (like checked, expanded, or selected).

Status Messages

Important status updates like 'form saved' or 'error occurred' should be announced by screen readers even if they don't interrupt what the user is doing.