WCAG Perceivable Principle

Principle 1: Perceivable

Information and user interface components must be presentable to users in ways they can perceive. This means content cannot be invisible to all of a user's senses.

Why Perceivability Matters

The Perceivable principle ensures that users can access content through at least one of their senses. For users who are blind, content must be available through sound or touch (braille). For users who are deaf, audio content must be available visually. For users with low vision, content must have sufficient contrast and be resizable.

39 Million

People worldwide are blind

466 Million

People have disabling hearing loss

300 Million

People are colorblind

Guideline 1.1: Text Alternatives

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

1.1.1 Non-text Content (Level A)

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for specific situations:

Requirements by Content Type:
  • Informative Images: Alt text describing the image's meaning or purpose
  • Functional Images: Alt text describing the action (e.g., "Search" for a search button)
  • Decorative Images: Empty alt attribute (alt="") so screen readers skip them
  • Complex Images: Brief alt text plus longer description nearby or linked
  • Form Controls: Labels programmatically associated with inputs
  • Time-based Media: At minimum, descriptive identification
  • CAPTCHAs: Text alternatives identifying the purpose, plus alternative forms
Common Mistake: Using filename as alt text (e.g., "IMG_4532.jpg") or generic text like "image" or "photo". Alt text should describe what the image conveys.

Guideline 1.2: Time-based Media

Provide alternatives for time-based media (audio and video content).

Captions are provided for all prerecorded audio content in synchronized media.

Caption Requirements:
  • Synchronized with the audio track
  • Include all dialogue
  • Identify speakers when not visually apparent
  • Describe relevant sound effects (e.g., [door slams], [phone rings])
  • Include music descriptions when relevant (e.g., [ominous music])

Audio description is provided for all prerecorded video content in synchronized media.

When Audio Description is Needed:
  • Visual information not conveyed through dialogue
  • On-screen text not spoken
  • Actions and scene changes essential to understanding
  • Facial expressions or body language conveying meaning

Captions are provided for all live audio content in synchronized media.

Implementation Options:
  • Professional CART (Communication Access Realtime Translation) captioners
  • AI-powered automatic speech recognition with human review
  • Stenography services for live events

Guideline 1.3: Adaptable

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

1.3.1 Info and Relationships (Level A)

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Key Requirements:
  • Use proper heading hierarchy (h1-h6)
  • Use semantic HTML (lists, tables, forms)
  • Associate form labels with inputs
  • Group related form elements with fieldset/legend
  • Use table headers (th) and scope attributes
1.3.2 Meaningful Sequence (Level A)

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

The DOM order should match the visual order. CSS positioning should not change the logical reading order.

1.3.4 Orientation (Level AA) - WCAG 2.1

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless essential.

Users with mounted devices may only be able to view content in one orientation.

Guideline 1.4: Distinguishable

Make it easier for users to see and hear content including separating foreground from background.

1.4.3 Contrast (Minimum)

Level AA

  • Normal text: 4.5:1 contrast ratio
  • Large text (18pt+ or 14pt bold): 3:1 ratio
  • UI components and graphics: 3:1 ratio
Good contrast Poor contrast
1.4.4 Resize Text

Level AA

Text can be resized without assistive technology up to 200% without loss of content or functionality.

  • Use relative units (em, rem, %)
  • Avoid fixed heights on text containers
  • Test at 200% zoom
1.4.10 Reflow (WCAG 2.1)

Level AA

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

  • Vertical scrolling content at 320 CSS pixels wide
  • Horizontal scrolling content at 256 CSS pixels high
1.4.11 Non-text Contrast

Level AA (WCAG 2.1)

Visual presentation of UI components and graphical objects have a contrast ratio of at least 3:1 against adjacent colors.

  • Form field borders
  • Focus indicators
  • Icons conveying information

Common Perceivable Issues Found in Audits

Issue Prevalence How to Fix
Low contrast text 83% of sites Increase color contrast to meet 4.5:1 ratio
Missing alt text 58% of sites Add descriptive alt attributes to images
Missing form labels 46% of sites Associate labels with form controls using for/id
Missing video captions 32% of sites with video Add synchronized captions to all videos
Text in images 28% of sites Use actual text instead of images of text

Testing Perceivable Requirements

Automated Testing
  • Color contrast analyzers
  • Alt text presence checkers
  • Heading structure validators
  • Form label association checks
Manual Testing
  • Screen reader testing (NVDA, JAWS, VoiceOver)
  • 200% zoom testing
  • Alt text quality review
  • Caption accuracy verification

Related WCAG Principles

Operable

Keyboard access, timing, navigation
Understandable

Readable, predictable, input assistance
Robust

Compatible with assistive technologies
On This Page
Related Laws
Most Common Violation

83%

of websites have low contrast text issues