Marcelo Paiva

WCAG Quotes

How to use WCAG Quotes

WCAG has 86 success criteria, and most teams meet them as a list of rule numbers. WCAG Quotes starts with the person each one helps.

A demo of 1 minute 50 seconds. The captions are part of the picture.

Read the transcript

This is WCAG Quotes. It takes every success criterion in the Web Content Accessibility Guidelines, version 2.2, and tells it in the words of the person it helps.

WCAG 2.2 has 86 success criteria. Most teams meet them as a checklist of rule numbers. A number does not tell you who is affected, or what your part of the fix is. WCAG Quotes starts with the person.

The index lists all 86, in the order of the guidelines. Each one shows its level and a quote. You can filter by level, or show only what is new in version 2.2.

Open a criterion, and it begins with a drawing and a quote. For Use of Color: Red means go, green means stop! Wait, that’s not right, is it? The quotes are written to illustrate each criterion. They are not testimonials from real people.

Next comes one task for each role: product manager, designer, developer and tester. Everyone leaves knowing what to do next.

Then the same person again, once it is fixed. From here you can post the criterion to LinkedIn, download it as a PDF carousel, or copy a link for your team.

For a workshop, Present as slides turns the criterion into five slides: a cover, the quote, the criterion, the tasks, and the thank-you. Move with the buttons or the arrow keys.

The site is built to the standard it teaches. It targets WCAG 2.2 level AA, works with a keyboard, comes in light and dark themes, and every drawing has a text description.

WCAG Quotes. Pick a criterion, read it to your team, and start with the person.

Step by step

  1. Find a criterionThe list holds all 86, in the order of the guidelines. Search by number, word or who it helps, filter by level, or press Surprise me for a random one as slides.
  2. Read the quoteOpen a criterion. It starts with a drawing and the barrier in a user’s words, then the requirement in a sentence.
  3. Give each role its taskThere is one task each for the product manager, the designer, the developer and the tester.
  4. Share itPost the criterion to LinkedIn, download it as a PDF carousel, or copy a link for your team.
  5. Present itPresent as slides turns the criterion into five slides. Move with the buttons or the arrow keys.

Every WCAG 2.2 success criterion, told by the person it helps. Each one has the barrier in a user’s words, the requirement in a sentence, and one task each for product, design, development and testing.

The quotes are written to illustrate each criterion. They are not testimonials from real people.

Level

Showing 86 of 86 criteria.

1. Perceivable

1.1 Text Alternatives

  • 1.1.1Level A

    Non-text Content

    “A picture may be worth a thousand words, but for me, it's worth zero if you don't describe it!”

1.2 Time-based Media

1.3 Adaptable

  • 1.3.1Level A

    Info and Relationships

    “Your page looks neatly organized. To my screen reader it's one long sentence: no headings, no lists, and a table that reads like soup.”

  • 1.3.2Level A

    Meaningful Sequence

    “Wait, I'm supposed to click on what first? It's like reading a book backwards!”

  • 1.3.3Level A

    Sensory Characteristics

    “So I should 'Click the round, red button.' Great, but what if I can't see 'round' or 'red'?”

  • 1.3.4Level AA

    Orientation

    “Hey, I didn't tilt the world, so why are you forcing me to tilt my screen?”

  • 1.3.5Level AA

    Identify Input Purpose

    “Filling out forms feels like a quiz I didn't study for. But with fields that recognize me, it's more like a friendly chat.”

  • 1.3.6Level AAA

    Identify Purpose

    “I swap your icons for symbols I already know. That only works if your page tells my browser what each thing is for.”

1.4 Distinguishable

  • 1.4.1Level A

    Use of Color

    “Red means go, green means stop! Wait, that's not right, is it?”

  • 1.4.2Level A

    Audio Control

    “Yikes! The video started blasting! I nearly dropped my coffee!”

  • 1.4.3Level AA

    Contrast (Minimum)

    “Is that text or a chameleon? I can't tell because it's blending into the background!”

  • 1.4.4Level AA

    Resize Text

    “Why do I feel like I need a microscope to read this text?”

  • 1.4.5Level AA

    Images of Text

    “Is that a logo or a ransom note? Text in images are a no-go for me!”

  • 1.4.6Level AAA

    Contrast (Enhanced)

    “Wow, the contrast here is so good, it's like the text is leaping off the screen!”

  • 1.4.7Level AAA

    Low or No Background Audio

    “If I wanted to listen to a rock concert while reading, I'd buy tickets!”

  • 1.4.8Level AAA

    Visual Presentation

    “I asked for readable text, not a jigsaw puzzle of fonts and spacing!”

  • 1.4.9Level AAA

    Images of Text (No Exception)

    “Your fancy headline is a picture. When I zoom in, it turns to mush, and I can't change the font or the colors.”

  • 1.4.10Level AA

    Reflow

    “At 400% zoom I have to scroll sideways for every single line. It's like reading a novel through a keyhole.”

  • 1.4.11Level AA

    Non-text Contrast

    “Is there a text box here? The border is so pale I've been typing into thin air.”

  • 1.4.12Level AA

    Text Spacing

    “I give my letters room to breathe, and your buttons chop the words in half.”

  • 1.4.13Level AA

    Content on Hover or Focus

    “Your tooltip pops up over the thing I'm reading and runs away the moment I move toward it.”

2. Operable

2.1 Keyboard Accessible

  • 2.1.1Level A

    Keyboard

    “Mouse? Who needs a mouse when you've got keyboard kung fu skills?”

  • 2.1.2Level A

    No Keyboard Trap

    “It's like I was stuck in a digital maze, and you handed me the escape key!”

  • 2.1.3Level AAA

    Keyboard (No Exception)

    “With your keyboard navigation, I'm feeling like a concert pianist but for web browsing!”

  • 2.1.4Level A

    Character Key Shortcuts

    “I accidentally launched the rockets when I was just trying to check my email! Maybe ease up on those shortcuts, eh?”

2.2 Enough Time

  • 2.2.1Level A

    Timing Adjustable

    “I might be slow, but that doesn't mean I'm not thorough. Stop rushing me!”

  • 2.2.2Level A

    Pause, Stop, Hide

    “I don't need dancing pop-ups and blinking ads. My life's already a circus!”

  • 2.2.3Level AAA

    No Timing

    “The Internet's already a race; don't make it a timed obstacle course too!”

  • 2.2.4Level AAA

    Interruptions

    “If I wanted constant interruptions, I'd go back to working in an open office!”

  • 2.2.5Level AAA

    Re-authenticating

    “If you log me out every 5 minutes, I swear I'll start writing my passwords on sticky notes!”

  • 2.2.6Level AAA

    Timeouts

    “I stepped away for a coffee and came back to a locked vault. Let me know if you're timing me out!”

2.3 Seizures and Physical Reactions

2.4 Navigable

  • 2.4.1Level A

    Bypass Blocks

    “Skip to content? Yes, please! I didn't come here for a scenic tour of your navigation.”

  • 2.4.2Level A

    Page Titled

    “A page without a title is like a book without a cover. How am I supposed to know what it's about?”

  • 2.4.3Level A

    Focus Order

    “It's like a game of hopscotch—my focus jumps from here to there. Can we make it a straight line, please?”

  • 2.4.4Level A

    Link Purpose (In Context)

    “'Click here'? Click where? And for what? Come on, let's be a little more descriptive!”

  • 2.4.5Level AA

    Multiple Ways

    “One path to the treasure? Nah, I need options! Show me different ways to get to the gold!”

  • 2.4.6Level AA

    Headings and Labels

    “Headings? Labels? Give 'em to me! It's like speed reading for my screen reader.”

  • 2.4.7Level AA

    Focus Visible

    “Where's Waldo? More like, where's my focus? Show me where I am!”

  • 2.4.8Level AAA

    Location

    “I need a map! Or at least a 'You Are Here' sign. Help me figure out where I am on your site!”

  • 2.4.9Level AAA

    Link Purpose (Link Only)

    “'Click Here' is like saying 'Eat This' without telling me what it is. I need to know what I'm getting into!”

  • 2.4.10Level AAA

    Section Headings

    “Think of section headings like road signs. I need to know where each turn leads!”

  • 2.4.11Level AANew in 2.2

    Focus Not Obscured (Minimum)

    “Playing peek-a-boo with focused elements isn't fun. Keep my focus visible!”

  • 2.4.12Level AAANew in 2.2

    Focus Not Obscured (Enhanced)

    “I need clear sightlines to navigate—ensure nothing's hiding my focus, not even a pixel!”

  • 2.4.13Level AAANew in 2.2

    Focus Appearance

    “Make the spotlight on the screen as clear as the one on Broadway; my focus deserves to stand out!”

2.5 Input Modalities

  • 2.5.1Level A

    Pointer Gestures

    “Pinch to zoom? I use a head pointer. I've got one point of contact, and it's doing its best.”

  • 2.5.2Level A

    Pointer Cancellation

    “My hand shook, I brushed 'Delete', and it was gone before I could lift my finger.”

  • 2.5.3Level A

    Label in Name

    “I say 'Click Send' and nothing happens, because your Send button is secretly named 'Submit form'.”

  • 2.5.4Level A

    Motion Actuation

    “Shake to undo? My phone is bolted to my wheelchair. Shall I shake the whole chair?”

  • 2.5.5Level AAA

    Target Size (Enhanced)

    “These buttons are so tiny I need a needle, not a finger.”

  • 2.5.6Level AAA

    Concurrent Input Mechanisms

    “I plugged in my keyboard and your app told me to use the touchscreen. I'll decide how I type, thanks.”

  • 2.5.7Level AANew in 2.2

    Dragging Movements

    “Drag and drop? For me it's more like drag and drop it somewhere in the middle, by accident.”

  • 2.5.8Level AANew in 2.2

    Target Size (Minimum)

    “I aimed for 'Save' and hit 'Delete'. They're so small and so close they're practically holding hands.”

3. Understandable

3.1 Readable

  • 3.1.1Level A

    Language of Page

    “Ahoy matey! Why's this site talkin' like a pirate? Set the language, will ya?”

  • 3.1.2Level AA

    Language of Parts

    “Don't switch languages on me mid-sentence! My brain isn't a real-time translator!”

  • 3.1.3Level AAA

    Unusual Words

    “What do you mean by 'propinquity'? Speak English, website!”

  • 3.1.4Level AAA

    Abbreviations

    “IDK what 'IDK' means! Spell it out for me!”

  • 3.1.5Level AAA

    Reading Level

    “Is this a website or a PhD dissertation? Simplify the language!”

  • 3.1.6Level AAA

    Pronunciation

    “I can't pronounce 'synecdoche.' How about a phonetic guide, huh?”

3.2 Predictable

  • 3.2.1Level A

    On Focus

    “Whoa, what just happened? I only tabbed in!”

  • 3.2.2Level A

    On Input

    “Hey, I was still reading! Don't switch tabs on me!”

  • 3.2.3Level AA

    Consistent Navigation

    “Where did the menu go? It was at the top, now it's at the bottom? Make up your mind, website!”

  • 3.2.4Level AA

    Consistent Identification

    “Why is 'Sign Out' called 'Log Off' on another page? Are you trying to confuse me?”

  • 3.2.5Level AAA

    Change on Request

    “Don't move the ground beneath me unless I say so. Changes should happen on my cue!”

  • 3.2.6Level ANew in 2.2

    Consistent Help

    “Whether I'm lost or just curious, knowing where to find help is a relief. Keep it consistent!”

3.3 Input Assistance

4. Robust

4.1 Compatible

  • 4.1.2Level A

    Name, Role, Value

    “'Button1'? 'Button2'? What do these buttons even do? Give 'em proper names!”

  • 4.1.3Level AA

    Status Messages

    “A little heads-up would be nice, you know! Did my form go through or not?”