WCAG in plain language

Every image, icon, and image button needs a text alternative that says what it is or does, so people who can't see it still get the message.

Audio with no video needs a transcript, and silent video needs a text or audio description of what's shown.

Videos with sound need captions, so people who are deaf or hard of hearing can follow along.

For video, blind viewers need the important visual details covered, either by an audio description or a full text alternative.

Live video with audio (a launch stream, a live shopping event) needs real-time captions too.

At AA, prerecorded video specifically needs audio description of the important visuals, a transcript alone isn't enough.

Provide a sign-language interpretation for prerecorded video with audio, for people who read sign language rather than captions.

When a video's normal pauses are too short to describe what's on screen, pause the video to fit in a fuller description.

Provide a full text version of prerecorded video, so it can be read instead of watched or heard.

For live audio-only broadcasts, provide a live text version so deaf and hard-of-hearing people can follow along.

The structure you show with visual design, like headings, lists, labels, and tables, must also exist in the code, so assistive tech understands it too.

The reading order in the code must make sense, because screen readers and reflowed layouts follow the code order, not the visual position.

Don't give instructions that rely only on shape, size, position, or sound, like 'click the round button on the right'.

Don't lock your store to portrait or landscape only, it must work whichever way the device is held.

Fields that collect personal info (name, email, address) should use the right autocomplete value, so browsers can autofill them.

Mark up the purpose of regions, icons, and controls in code, so tools can adapt them (swap icons, add symbols, simplify).

Color can't be the only way you signal something, because not everyone sees color the same way, or at all.

If sound plays automatically for more than 3 seconds, give people an easy way to pause, stop, or mute it.

Text has to stand out enough from its background to be readable: at least 4.5:1 contrast for normal text, 3:1 for large text.

People must be able to zoom text up to 200% and still use everything, and nothing should get cut off or overlap.

Use real text, not pictures of text, so it stays sharp, resizable, and readable by screen readers (logos excepted).

The stricter version of the contrast rule: text needs a 7:1 contrast ratio against its background, not just 4.5:1.

In audio with speech, keep background music and noise low (or removable) so the words stay clear.

Give blocks of text reader-friendly formatting: narrow columns, adjustable colours, generous line spacing, no forced justification.

The strict version: don't use pictures of text at all, except where the exact look is essential (like a logo).

Content has to reflow into a single column on a narrow screen (or high zoom), with no two-directional scrolling to read.

Buttons, form borders, icons, and focus outlines need enough contrast too, at least 3:1, not just your text.

If someone increases line height or letter/word spacing to read more easily, your content must not break or get cut off.

Tooltips and pop-ups that appear on hover or focus must be dismissable, stay put while you move onto them, and not disappear on their own.

Everything on the page must work with a keyboard alone, not just a mouse: menus, sliders, add-to-cart, modals, all of it.

If keyboard focus can move into something, it must be able to move back out, so no one gets stuck in a widget or popup.

The strict version: everything on the page must work with a keyboard, with no exceptions at all.

If a single letter key triggers an action, let people turn it off or remap it, so it doesn't fire by accident.

If a page has a time limit, let people turn it off, adjust it, or extend it, because not everyone works at the same speed.

Moving, blinking, or auto-updating content that runs more than 5 seconds needs a way to pause, stop, or hide it.

The strict version: don't put any time limits on using the page, except for real-time events like live auctions.

Let people postpone or turn off interruptions like popups and auto-refreshes, except for genuine emergencies.

If a session expires, let people log back in and continue without losing the data they'd already entered.

Warn people how long they can be inactive before a timeout wipes their data, unless the data is kept for at least 20 hours.

Nothing should flash more than three times per second, because rapid flashing can trigger seizures.

The strict version: nothing on the page may flash more than three times a second, full stop, regardless of size or brightness.

Let people turn off non-essential motion animation that fires when they scroll or interact.

Give people a way to skip past the stuff repeated on every page (like the nav) and jump straight to the main content.

Every page needs a clear, unique title that says what the page is, it's the first thing a screen reader announces.

As you Tab through the page, focus should move in an order that makes sense, matching the visual and logical flow.

Link text should make clear where the link goes, so 'View cart' beats a row of identical 'click here' links.

Give people more than one way to find things, like a menu plus a search box or a sitemap.

Headings and form labels should actually describe what they're about, not be vague or generic.

The element you've Tabbed to must show a clear focus outline, so keyboard users can always see where they are.

Help people know where they are within your site, usually with breadcrumbs and a clear sitemap.

The strict version: a link's own text should say where it goes, without needing the surrounding sentence for context.

Break up content with real headings that label each section, so people can scan and jump around.

When you Tab to something, a sticky header, footer, or cookie bar must not completely hide it from view.

The strict version: when you tab to something, no part of it may be hidden by sticky headers, banners, or chat widgets.

The keyboard focus outline must be big enough and high-contrast enough to actually notice.

Anything done with a complex gesture (pinch, swipe-along-a-path) must also work with a simple tap or click.

Actions should fire when you lift your finger, not the moment you touch down, so you can slide off to cancel a mistap.

A control's coded name must include its visible text, so voice-control users can say what they see.

If shaking or tilting the device does something, there must also be a normal button, and a way to turn motion control off.

The strict version: tap targets should be at least 44 by 44 pixels, roomier than the AA minimum.

Don't lock people into one way of interacting; let them switch freely between touch, mouse, keyboard, and other inputs.

Anything you do by dragging must also work with a simple tap or click, because not everyone can drag.

Tap targets like buttons and links should be at least 24 by 24 pixels, or have enough space around them, so they're easy to hit.

Tell the browser what language the page is in, with one small lang attribute, so screen readers pronounce it correctly.

Mark any phrase that's in a different language, so a screen reader switches to the right pronunciation for it.

Explain jargon, idioms, and unusual words, with a definition or a glossary link, so everyone can follow.

Spell out or explain abbreviations and acronyms, so people aren't left guessing what the letters mean.

Where text is harder to read than lower-secondary level, provide a simpler version or supporting aids.

Where a word's meaning depends on how it's pronounced, provide the pronunciation so it isn't ambiguous.

Simply moving to an element must not trigger a surprise, like a popup, a jump, or a page change.

Changing a form field's value must not automatically do something surprising, unless you've warned people first.

Keep your navigation in the same order on every page, so people don't have to relearn where things are.

Call the same thing by the same name everywhere, don't label the same feature 'Search' on one page and 'Find' on another.

The strict version: big changes (new pages, popups, redirects) happen only when the user asks, never automatically.

If you offer help (a contact link, phone number, or chat), put it in the same place on every page that has it.

When a form field is wrong, say so in clear text, and point to the exact field, not just a red border.

Every form field needs a clear, persistent label (and any needed instructions), not just placeholder text that vanishes.

When you can tell what someone meant, suggest the fix, not just 'invalid', but 'the date should be MM/YYYY'.

For purchases, legal commitments, or data changes, let people review, correct, or undo before it's final.

Offer context-sensitive help where people fill in forms, so they aren't stuck on a confusing field.

The strict version: any form that submits data must be reversible, checked, or confirmed, not just legal or financial ones.

Don't make people type the same information twice in one process, auto-fill it or let them pick it instead.

Logging in must not require a memory or puzzle test, let people paste passwords and use password managers.

The strict version: logging in must never rely on a memory or puzzle test, including recognising objects or your own images.

This criterion is obsolete in WCAG 2.2. It always passes now, so you no longer need to test for it.

Every control must tell assistive tech three things in code: what it is (role), what it's called (name), and its current state (value).

Messages that appear without moving focus, like 'Added to cart' or '3 results found', must be announced to screen readers too.