All 55 success criteria a site needs for level AA (plus the two AAA ones a11ymedic can test), each in a sentence or two, with a typical failure and the people it helps most. 25 of them have automated a11ymedic checks; the rest need a person, and the tip says how.
People must be able to get the information with the senses they have: text for images, captions for video, enough contrast, and structure that still makes sense when the visual layout is gone.
1.1.1Level A
Non-text Content
Every image, icon, chart or embedded object that carries meaning needs a text alternative. Decorative images need an empty alt so screen readers skip them.
Fails when: A product photo with no alt attribute, so a screen reader reads the file name "IMG_2041.jpg".
Also check by hand: A tool can see that alt exists, not that it is right. Read each alt text out loud without looking at the image and ask if it gives the same information.
HelpsScreen reader usersLow visionCognitive and learning
A recorded podcast or audio clip needs a transcript. A silent video that shows information needs a text description or an audio track that explains it.
Fails when: A podcast episode page that only offers the audio player and no transcript.
Check by hand: List every audio and silent video file on the site and confirm each one links to a transcript or text description.
Recorded video with sound needs synchronized captions that include speech and important sounds. Captions are text tracks, not part of the image.
Fails when: A product demo video served with a <video> element that has no <track kind="captions">.
a11ymedic checks:video-caption
Also check by hand: Turn the sound off and watch the video. Check that the captions are accurate, in sync, and mention sounds that matter such as an alarm or laughter.
Audio Description or Media Alternative (Prerecorded)
When a recorded video shows information that is not spoken, provide audio description or a full text alternative that describes what happens on screen.
Fails when: A tutorial video where the presenter says "click here, then here" and never names what is clicked.
Check by hand: Listen to the video with your eyes closed. Anything you miss must be in an audio description or a text version.
At level AA a text alternative is not enough: recorded video needs audio description of important visual information that the soundtrack does not already explain.
Fails when: A marketing video that shows prices and dates only as on screen text with music playing.
Check by hand: Script the video so speakers describe what is shown, or produce a described version and link to it next to the player.
Structure that you can see must also exist in the code: headings are real headings, lists are real lists, tables have header cells, and labels are connected to their fields.
Fails when: A bold <div class="title"> that looks like a heading but is not an <h2>, so screen reader users cannot jump to it.
Do not lock the page to portrait or landscape unless the orientation is essential, such as a piano app. People with mounted devices cannot rotate them.
Fails when: A web app that shows "Please rotate your device" and blocks the content in landscape.
Check by hand: Open the page on a phone and rotate it both ways. Everything should remain usable.
Fields that ask for the user's own data (name, email, phone, address) need the correct autocomplete value so browsers can fill them and tools can show familiar icons.
Fails when: An email field with no autocomplete attribute, or with autocomplete="e-mail", which is not a valid token.
a11ymedic checks:autocomplete-validinput-purpose
Also check by hand: Fill the form with browser autofill. Each personal field should fill correctly on the first try.
Color must not be the only way to show information. Add text, an icon, an underline or a pattern so people who cannot tell colors apart still get the message.
Fails when: Form errors shown only by turning the field border red, with no error text.
Check by hand: View the page in grayscale (most browsers' developer tools can emulate it) and check that nothing important disappears.
Sound that plays automatically for more than 3 seconds needs a way to pause or mute it. Better: do not autoplay sound at all.
Fails when: A hero video with autoplay and sound, which talks over the user's screen reader.
a11ymedic checks:autoplay-media
Also check by hand: Load each page with the volume up. If you hear anything you did not start, check that a pause or mute control is the first thing on the page.
Text needs a contrast ratio of at least 4.5:1 against its background. Large text (24px, or 18.66px bold) needs 3:1.
Fails when: Light gray #999999 text on white, which is 2.84:1.
a11ymedic checks:color-contrast
Also check by hand: Text over photos, videos and complex gradients cannot be measured from code alone. Check the worst spot by eye or with a color picker.
Content must fit a 320 CSS pixel wide viewport without horizontal scrolling (data tables, maps and similar content are exceptions). This is what 400 percent zoom looks like on a laptop.
Fails when: A fixed 1200px wide layout that forces people who zoom to scroll sideways on every line.
Check by hand: Set the browser window to 1280px wide and zoom to 400 percent, or emulate a 320px wide screen, and read the whole page.
Parts of controls (input borders, checkbox outlines, focus rings) and meaningful graphics (chart lines, icons) need 3:1 contrast against what is next to them.
Fails when: A text field whose only visible border is #e0e0e0 on white.
Check by hand: Use a color picker on field borders, icon strokes, chart lines and focus indicators, and check each one against its neighbor color.
When people increase line height to 1.5, paragraph spacing to 2 times the font size, letter spacing to 0.12 and word spacing to 0.16, no content may be cut off or overlap.
Fails when: A button with a fixed height where text clips when letter spacing is increased.
Check by hand: Apply a text spacing bookmarklet or user stylesheet with those values and look for clipped or overlapping text.
Tooltips and popovers that appear on hover or focus must be dismissable with Escape, stay open while the pointer moves over them, and stay until the user moves away.
Fails when: A tooltip that disappears when the mouse moves onto it, so people using screen magnifiers can never read it.
Check by hand: Hover and focus every tooltip, move the pointer onto it, and press Escape. It should stay readable and close only when asked.
Everything must work with a keyboard, a mouse, a touch screen, a switch or a voice command, with enough time, nothing that flashes dangerously, and a clear way to find where you are.
2.1.1Level A
Keyboard
Everything you can do with a mouse must also work with a keyboard alone. Use real buttons and links, which handle Enter and Space for free.
Fails when: A <div onclick="save()"> that a keyboard can neither focus nor activate.
Single key shortcuts (a letter, number or symbol with no modifier) must be possible to turn off or remap, or work only when the related part has focus.
Fails when: A web mail app where pressing "d" deletes a message, which fires when a voice control user dictates a word.
Check by hand: List every keyboard shortcut. Any shortcut without Ctrl, Alt or Cmd needs a setting to disable or change it.
Motion triggered by interaction (parallax, zooming transitions, large slides) must be possible to turn off. Respect the prefers-reduced-motion setting.
Fails when: A page transition that slides the whole screen even when the operating system is set to reduce motion.
a11ymedic checks:motion-reduced
Also check by hand: Turn on the reduce motion setting of your operating system and use the site. Large movements should stop or become simple fades.
Keyboard focus must move in an order that keeps the meaning. Positive tabindex values and CSS reordering often break this.
Fails when: tabindex="3" on a footer link, so it receives focus before the main form.
a11ymedic checks:tabindex
Also check by hand: Tab through the page and watch the focus. It should follow the visual reading order, and dialogs should receive focus when they open.
When an element receives keyboard focus, it must not be completely hidden by sticky headers, cookie banners, chat widgets or other content the author added.
Fails when: A sticky footer bar that covers the focused link when tabbing near the bottom of the screen.
Check by hand: Tab through a long page with every sticky header, footer and banner visible, and check that the focused element is never fully covered.
When a control has visible text, its accessible name must contain that text, ideally at the start. Voice control users say what they see.
Fails when: A button that shows "Search" but has aria-label="Find products", so saying "click Search" does nothing.
a11ymedic checks:label-in-name
Also check by hand: For each button and link with an aria-label, compare the label with the visible text. The visible words should appear in the label.
Click and tap targets must be at least 24 by 24 CSS pixels, or have enough space that a 24 pixel circle centered on them does not touch another target. Links inside sentences are exempt.
Fails when: Three 16 by 16 pixel social icons placed 4 pixels apart.
a11ymedic checks:target-size
Also check by hand: Without layout, size depends on CSS a tool may not see. Run the check in a real browser (overlay or headless) or measure small icons in developer tools.
Text and controls must behave in a predictable way: the page declares its language, nothing changes by surprise, and forms explain what they need and how to fix a mistake.
3.1.1Level A
Language of Page
The <html> element needs a valid lang attribute so screen readers pick the right voice and pronunciation, and browsers translate and hyphenate correctly.
Fails when: <html> with no lang, so a Portuguese page is read with English pronunciation.
a11ymedic checks:html-has-langhtml-lang-valid
Also check by hand: Check that the lang value matches the language the page is actually written in, especially on translated pages.
Logging in must not depend on a memory or puzzle test, such as transcribing characters, unless there is an alternative. Allow paste and password managers.
Fails when: A password field with onpaste="return false", which breaks password managers.
a11ymedic checks:paste-blocked
Also check by hand: Log in using a password manager and by pasting a password and a one time code. Check that any puzzle has an accessible alternative.
The code must expose the correct name, role and state of every part so browsers and assistive technologies, today and tomorrow, can present it reliably.
4.1.2Level A
Name, Role, Value
Every control needs an accessible name, the correct role, and states that update when they change (expanded, checked, selected). Native HTML elements do this for you.
Fails when: An icon only <button> with an SVG and no text, announced as just "button".
Also check by hand: Use a screen reader on custom widgets (menus, tabs, accordions) and check that states such as expanded and selected are announced when they change.
