Accessibility Perceivable

Accessibility — Perceivable

WCAG Principle 1: information and user-interface components must be presentable to users in ways they can perceive.

The four sub-criteria, simplified:

1. Text alternatives for non-text content.
2. Time-based media (audio/video) has alternatives.
3. Adaptable content can be presented in different ways without losing structure.
4. Distinguishable — color contrast, audio control, text resizing.

This skill covers each in practical detail.

1. Text alternatives

Images

Every image gets alternative text describing what's relevant about it. The right alt text depends on the image's role:

<!-- Informative: describe what the user needs to know -->
<img src="/dashboard-screenshot.png"
     alt="Dashboard showing $48,200 monthly revenue, up 12% from last month." />

<!-- Functional (image as link / button): describe the action -->
<a href="/profile">
  <img src="/avatar.png" alt="Open your profile" />
</a>

<!-- Decorative: empty alt so screen readers skip -->
<img src="/decorative-pattern.svg" alt="" aria-hidden="true" />

<!-- Complex (chart, infographic): brief alt + linked long description -->
<figure>
  <img src="/sales-chart.png"
       alt="Quarterly sales chart, see description below."
       aria-describedby="chart-desc" />
  <figcaption id="chart-desc">
    Sales rose from $12k in Q1 to $58k in Q4, with a dip to $31k in Q3 caused
    by a supply chain interruption.
  </figcaption>
</figure>

Common mistakes:

• alt="image" or alt="photo of woman" — describes the file type, not the meaning.
• Decorative images with non-empty alt — screen reader users hear "decorative-pattern-3-svg" announced as content.
• Long alt text on simple images — alt should be ≤ 125 characters; longer goes in <figcaption> or linked description.

Icons

Icon-only buttons need an accessible name. Two patterns:

<!-- Pattern A: aria-label on the button -->
<button aria-label="Close">
  <svg aria-hidden="true">...</svg>
</button>

<!-- Pattern B: visually-hidden text -->
<button>
  <svg aria-hidden="true">...</svg>
  <span class="sr-only">Close</span>
</button>

Either is fine; pattern B can be more reliable across screen readers. The sr-only class:

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

Decorative SVG

<svg aria-hidden="true" focusable="false">...</svg>

aria-hidden removes from accessibility tree; focusable="false" prevents keyboard focus on the SVG (some browsers focus SVGs by default).

2. Time-based media

Video

• Captions for all spoken content. Auto-generated captions are a starting point; review for accuracy.
• Audio descriptions for visual content not conveyed by audio (a chart appearing on screen, a character action shown but not narrated).
• Transcripts as text alternatives for anyone who can't watch.

Audio

• Transcripts for podcasts, interviews, voicemails.
• Captions or transcripts for any audio-only message in the UI.

Auto-playing media

Don't autoplay video or audio with sound. WCAG 1.4.2 requires that audio playing for more than 3 seconds either:

• Has a pause/stop control, or
• Has a volume control independent of system volume.

Better: don't autoplay sound at all. It's hostile to users with hearing aids, in public spaces, or sharing audio output.

3. Adaptable

Semantic structure

Use HTML elements for what they're for. Heading order matters; landmarks matter; lists matter.

<!-- Right -->
<main>
  <h1>Dashboard</h1>
  <section aria-labelledby="kpi-heading">
    <h2 id="kpi-heading">This month</h2>
    <ul>
      <li>Revenue: $48k</li>
      <li>Users: 12,481</li>
    </ul>
  </section>
</main>

<!-- Wrong: divs everywhere, no structure -->
<div>
  <div>Dashboard</div>
  <div>This month</div>
  <div>Revenue: $48k</div>
  <div>Users: 12,481</div>
</div>

Screen readers navigate by headings (H key in NVDA), landmarks (R key), lists, links. Without semantic structure, navigation falls apart.

Heading order

Don't skip heading levels. Page structure:

<h1>Page title (one per page)
  <h2>Section
    <h3>Subsection
      <h4>Sub-subsection

Going from <h1> to <h3> confuses assistive tech. If the visual size you want for an <h2> is too large, restyle the <h2> — don't reach for <h3> to get smaller text.

Reading order

Source order in HTML should match visual reading order. CSS Grid and Flexbox can rearrange visually, but screen readers follow source order.

<!-- Source order matches visual order: title, then summary, then details -->
<article>
  <h2>Article title</h2>
  <p class="summary">Brief summary.</p>
  <p>Detailed body...</p>
</article>

<!-- Wrong: visually rearranged but source order is now confusing -->
<article style="display: flex; flex-direction: column-reverse;">
  <p>Detailed body...</p>
  <p>Summary.</p>
  <h2>Title</h2>
</article>

Programmatic relationships

Use <label for>, aria-labelledby, aria-describedby to expose visual relationships to assistive tech.

<div>
  <label for="email">Email</label>
  <input id="email" aria-describedby="email-help" />
  <p id="email-help">We'll never share this.</p>
</div>

The label is associated; the help text is associated. A screen reader announces all three together.

4. Distinguishable

Color contrast

WCAG ratios:

Test every text-on-background combination. Common failures:

• Light grey body text (#999 on white = 2.85:1, fails AA).
• Brand-color body links (#1e90ff on white = 3.4:1, fails AA for body text).
• Placeholder text in inputs (often muted to look "less important," ends up unreadable).

Tools: WebAIM Contrast Checker, Stark plugin, Chrome DevTools' contrast inspector.

Color not the only signal

WCAG 1.4.1: don't use color alone to convey information. Pair with icon, text, pattern, or position.

<!-- Wrong: red border = error, but if red isn't perceivable, no signal -->
<input style="border: 2px solid red" />

<!-- Right: red border + icon + descriptive text -->
<div class="field" data-state="error">
  <label for="email">Email</label>
  <input id="email" aria-invalid="true" aria-describedby="email-error" />
  <p id="email-error">
    <AlertIcon aria-hidden="true" /> Please enter a valid email.
  </p>
</div>

Text resize

WCAG 1.4.4: text must be resizable up to 200% without loss of content or functionality. Test:

• Browser zoom at 200% — does content reflow without horizontal scroll?
• Text size only at 200% (Firefox supports text-only zoom) — does the layout survive?

Use relative units (rem, em, %) for type sizes; avoid px for body text. Use vw/vh cautiously — they don't scale with text size.