Perceivable: Making Content Accessible to All Senses

The first principle of WCAG, Perceivable, states that information and user interface components must be presentable to users in ways they can perceive. This means ensuring that users can access the content through sight, sound, or touch, often with the help of assistive technologies.

Abstract image representing different human senses like sight and hearing interacting with digital content. — Content must be presentable through various sensory channels.

If content is not perceivable to a user, it simply doesn't exist for them. This principle covers a wide range of guidelines designed to ensure that all users, regardless of their sensory abilities, can access the information presented.

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. This is crucial for users who are blind or have low vision and rely on screen readers, as well as for search engines indexing your content.

Images: All informative images need descriptive alt text. Decorative images should have an empty alt="" attribute.
Audio/Video: Provide text transcripts for audio-only content and synchronized captions for video content.
Controls, Input: If non-text content is a control or accepts user input, such as an icon button, it must have a name that describes its purpose.

Related to understanding how information is presented, you might be interested in Data Visualization Techniques and Tools for presenting complex data in perceivable ways.

Guideline 1.2: Time-based Media

Provide alternatives for time-based media. This includes audio and video content.

Captions (Prerecorded): Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
Audio Description (Prerecorded): Audio description is provided for all prerecorded video content in synchronized media.
Live Captions: Captions are provided for all live audio content in synchronized media.
Audio Description (Live): Audio description is provided for all live video content in synchronized media.

An illustration of video player controls with captions and audio description icons highlighted. — Alternatives like captions and audio descriptions make multimedia accessible.

Guideline 1.3: Adaptable

Create content that can be presented in different ways (for example simpler layout) without losing information or structure. This ensures that content can be adapted to meet the needs of different users and assistive technologies.

Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text (e.g., using proper heading structures, lists, and table markup).
Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
Sensory Characteristics: Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.

Guideline 1.4: Distinguishable

Make it easier for users to see and hear content including separating foreground from background. This involves considerations like color contrast, text size, and audio clarity.

Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Audio Control: If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.
Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.
Resize text: Text can be resized without assistive technology up to 200 percent without loss of content or functionality.
Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text.

Examples of good and poor color contrast in text and background. — Sufficient contrast between foreground and background is key for readability.

By focusing on these aspects of perceivability, you lay a strong foundation for an accessible website. The next principle to explore is Operable, ensuring users can interact with your site.