Perceivable Guidelines — WCAG 1.1 Through 1.4

In this tutorial, you will learn about Perceivable Guidelines. We cover key concepts, practical examples, and best practices to help you master this topic.

WCAG Perceivable guidelines ensure users can perceive content through text alternatives (1.1), time-based media alternatives (1.2), adaptable content presentation (1.3), and distinguishable content with sufficient contrast (1.4).

What You'll Learn

You will learn the four perceivable guidelines, their key success criteria, and how to implement them with practical code examples.

Why It Matters

Perceivable violations are the most commonly cited in Accessibility lawsuits. Getting perceivable right eliminates the most visible accessibility barriers.

Real-World Use

DodaTech's automated accessibility scanner catches perceivable violations before code is merged. The most common fixes are alt text, captions, and color contrast.

flowchart TD
  A[Perceivable Guidelines] --> B[1.1 Text Alternatives]
  A --> C[1.2 Time-based Media]
  A --> D[1.3 Adaptable]
  A --> E[1.4 Distinguishable]
  B --> F[Alt text for images]
  C --> G[Captions, transcripts, audio descriptions]
  D --> H[Semantic structure, relationships]
  E --> I[Color contrast, resize text, reflow]

Guideline 1.1 — Text Alternatives

Provide text alternatives for any non-text content. This allows assistive technologies to present content in different forms.

Key Criteria

1.1.1 Non-text Content (A): All non-text content must have a text alternative. Decorative images need empty alt. Informative images need descriptive alt.

<!-- Good: informative image -->
<img src="threat-chart.png" alt="Chart showing 30 percent decrease in detected threats from Q1 to Q2 2026">

<!-- Good: decorative image -->
<img src="decoration.png" alt="">

<!-- Good: functional image (link) -->
<a href="/report.pdf">
  <img src="pdf-icon.png" alt="Download annual security report (PDF, 2MB)">
</a>

Guideline 1.2 — Time-based Media

Provide alternatives for audio and video content.

Key Criteria

1.2.1 Audio-only and Video-only (A). 1.2.2 Captions (A). 1.2.3 Audio Description (A). 1.2.4 Captions (Live) (AA). 1.2.5 Audio Description (AA).

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track kind="captions" src="tutorial.vtt" srclang="en" label="English captions">
  <track kind="descriptions" src="tutorial-description.vtt" srclang="en">
</video>

Guideline 1.3 — Adaptable

Create content that can be presented in different ways without losing information or structure.

Key Criteria

1.3.1 Info and Relationships (A): Use semantic HTML. 1.3.2 Meaningful Sequence (A). 1.3.3 Sensory Characteristics (A). 1.3.4 Orientation (AA). 1.3.5 Identify Input Purpose (AA).

<!-- Semantic structure that can be adapted -->
<article>
  <h2>Scan Complete</h2>
  <p>Your system is protected.</p>
  <table>
    <caption>Threats detected by category</caption>
    <thead>
      <tr>
        <th scope="col">Category</th>
        <th scope="col">Count</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Viruses</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Malware</td>
        <td>1</td>
      </tr>
    </tbody>
  </table>
</article>

Guideline 1.4 — Distinguishable

Make it easier for users to see and hear content.

Key Criteria

1.4.1 Use of Color (A). 1.4.2 Audio Control (A). 1.4.3 Contrast (Minimum) (AA): 4.5:1 for normal text. 1.4.4 Resize Text (AA). 1.4.5 Images of Text (AA). 1.4.10 Reflow (AA). 1.4.11 Non-text Contrast (AA). 1.4.12 Text Spacing (AA).

/* Meeting contrast requirements */
body {
  color: #1a1a1a;      /* 14.5:1 on white — exceeds 4.5:1 */
  background: #ffffff;
}

.error-message {
  color: #d32f2f;      /* 4.6:1 on white — passes 4.5:1 */
  background: #ffffff;
}

/* Reflow-safe layout: works at 400% zoom */
.container {
  max-width: 100%;
  padding: 1rem;
}

/* Text spacing override support */
* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

Common Mistakes

1. Missing Alt Text on Informative Images

Every informative image needs descriptive alt text. File names or no alt attribute both create barriers.

2. Using Color Alone for Error States

Red text for errors is invisible to color blind users. Add an icon or text label.

3. Low Contrast Text

Gray text on white backgrounds often fails 4.5:1. Use a contrast checker before finalizing colors.

4. Auto-Playing Video

Video that plays on load violates 1.4.2. Let users control playback.

5. Content That Does Not Reflow

At 400 percent zoom, content should not require horizontal scrolling. Use responsive layouts.

6. Skipping Captions

Videos without captions violate 1.2.2 and exclude deaf users.

7. Non-Text Contrast for Icons

Icons and interface components need 3:1 contrast against adjacent colors.

Practice Questions

1. What is the minimum contrast ratio for normal text?

4.5:1 for normal text, 3:1 for large text (18px bold or 24px regular).

2. When should an image have empty alt text?

When it is decorative and does not convey information. Empty alt (alt) tells screen readers to skip the image.

3. What are the three requirements for time-based media?

Captions for audio, audio descriptions for video, and transcripts for both.

4. What does Guideline 1.3 (Adaptable) require?

Content that can be presented in different ways without losing meaning. Use semantic HTML that screen readers can adapt.

5. Challenge: Scan any webpage with a contrast checker. Identify three color combinations that fail 4.5:1. Suggest fixes.

FAQ

Mini Project

Audit a webpage for all four perceivable guidelines. Create a checklist and test for alt text, captions, semantic structure, and color contrast. Document all violations with screenshots.

What's Next

Learn about Operable Guidelines 2.1 through 2.5 covering keyboard access, timing, seizures, navigation, and input modalities.