Perceivable — WCAG Principle 1

Why it matters

Perceivable is the first WCAG principle and the foundation of all other accessibility requirements. If users cannot perceive content — cannot see an image, cannot hear audio, cannot distinguish text from background — no other aspect of accessibility matters. Perceivable establishes that every piece of information must be available through at least one sensory channel that each user can access. (BoK p. 40)

Guideline 1.1: Text alternatives

Every non-text element must have a text alternative that conveys the same information. This is the oldest and most fundamental accessibility requirement on the web. (BoK p. 40)

• Images conveying information need an alt attribute that describes what the image communicates, not what it looks like.
• Decorative images need an empty alt attribute (alt="") so screen readers skip them — a decorative image read aloud as a filename creates noise, not information.
• Functional images (icons that are also buttons or links) need alt text that describes the function, not the appearance.
• Complex images (charts, graphs, diagrams) need extended descriptions conveying the data or relationships in the image.

A missing text alternative is a Perceivable failure. It does not mean the image is decorative — it means the developer made a decision that was not always deliberate.

Guideline 1.2: Time-based media

Audio and video content requires equivalent alternatives: (BoK p. 40)

• Captions: synchronized text equivalents for audio in video. Required for prerecorded video with audio content (Level A), and for live video (Level AA).
• Audio description: narration added during pauses in dialogue describing visual information not conveyed in the audio track. Required for prerecorded video (Level A for prerecorded, Level AA for prerecorded extended).
• Transcripts: a text document containing all audio content plus relevant visual content. Required for audio-only content at Level A.
• Sign language interpretation: required only at Level AAA.

Guideline 1.3: Adaptable

Content must be structured so it can be presented in different ways without losing information or structure. This principle requires that meaning is not embedded only in visual presentation: (BoK p. 40)

• Information conveyed through layout (e.g., column position indicating importance) must also be conveyed in the content itself.
• Sequence matters: content read in the DOM order must make sense.
• Sensory characteristics (shape, size, position, color, sound) cannot be the only way instructions are communicated — “click the red button” is a failure.

Guideline 1.4: Distinguishable

Users must be able to perceive content by separating foreground from background: (BoK p. 40)

• Color alone: information, prompts, and errors cannot rely solely on color (color blindness affects approximately 8% of men).
• Minimum contrast: text must have at least 4.5:1 contrast ratio against its background at Level AA (3:1 for large text). Enhanced contrast (7:1) is a Level AAA requirement.
• Resize text: text must be resizable up to 200% without loss of content or functionality.
• Images of text: avoid using images of text when live text can achieve the same visual result.

Real-world example

A news website publishes article summary cards with a hero image, a headline, a category label in red, and a “breaking news” icon. Audit findings: the hero image has no alt text (Guideline 1.1 failure), the embedded video has no captions (1.2 failure), the category label uses only color to distinguish sections (1.4 failure), and the category text has a 3.8:1 contrast ratio (1.4 failure). Each failure is independently fixable — alt text, captions, text labels alongside color coding, and a darker font color — and each fix makes the content more perceivable to a different segment of users.