WCAG Principles

Perceivable

Information and user interface components must be presented in a way that users can perceive them. This includes providing alternative text for images, captions for videos, and ensuring content is distinguishable.

Implementing the Principles

Making a Website Perceivable

People must be able to perceive the information being presented. It can’t be invisible to all of their senses. According to the WCAG this includes items such as:

• Providing text alternatives for any non-text content for instance using short text alternatives for all images as well as long descriptions for complex images
• Providing alternatives for audio and video, such as captioning and audio descriptions
• Not playing audio automatically
• Using good structure for web pages such as real headings, real lists, and proper data tables for data
• Making it easier for users to separate foreground from background for instance using good contrast and plain rather than busy backgrounds
• Not relying solely on color to present information
• Presenting content in a meaningful order

Examples of Perceivable Website

• The Mighty Network‘s website overall exemplifies perceivable design, with well-structured pages, plain backgrounds, and excellent color contrast. Its homepage features easily readable text and images, complemented by subtle animations and videos. ARIA tags and alternative text aid screen reader users.

• CNN‘s website demonstrates perceivable design with detailed Closed Caption options for videos, offering customizable font and color settings. This commitment to accessibility extends to well-structured pages and clear typography, ensuring a user-friendly experience for all.