A detailed analysis of the first WCAG pillar, with technical rules and tips for a truly inclusive website.
Welcome to the first part of our series on web accessibility! In the next four articles, we will delve into the WCAG (Web Content Accessibility Guidelines) principles, known by the acronym POUR. These principles form the basis for creating digital experiences open to everyone and are defined as: Perceivable, Operable, Understandable, and Robust.
Today, we focus on the cornerstone of accessibility: Perceptibility.
What Does It Mean for a Site to Be Perceivable?
The principle of Perceptibility requires that information and user interface components must be presentable to users in ways they can perceive—this means through sight, hearing, or touch. In other words, content cannot be undetectable to all of a user's senses. If a person with visual impairments cannot access the information in an image, or a user with hearing impairments cannot understand a video, your site is not perceivable.
WCAG Conformance Levels
Before diving into the technical details, it's important to understand how WCAG guidelines are classified. For each principle, the rules fall into one of the following three categories, which indicate the degree of accessibility achieved:
- Level A: This is the minimum level of conformance. Failure to meet these guidelines creates significant barriers for users with disabilities.
- Level AA: This level includes all Level A requirements, plus additional ones. It is the reference standard for most global legislation, including the European Accessibility Act (EAA), providing a medium and robust level of accessibility.
- Level AAA: The highest and most complex level of conformance. It includes all requirements from Levels A and AA and is typically adopted by specialized organizations or for content aimed at a specific audience with distinct needs.
Detailed Technical Guide for the Principle of Perceptibility
Below, we have taken and structured the technical rules and tips exactly as they are defined in the official guidelines to provide a practical tool for developers and content creators.
1.2 Provide text alternatives for any non-text content
1.2.1. [AAA] Non-text Content
- All images and image-buttons must have suggestive alternative text.
- For background images, CSS-generated backgrounds are preferred. If images are used for the background, they must have an explicitly marked null alternative text.
- Form buttons must have a descriptive value.
- Form inputs must have descriptive text labels.
- Multimedia content must be identified by descriptive, accessible text.
- Any frame used must have a title.
Tips:
- ARIA: Use aria-label, aria-labelledby, or aria-describedby to add labels or text alternatives.
- General: For a group of images that should be interpreted collectively, a non-null alt can be added to the first image to describe the group, while the others have explicitly null alternative texts.
- HTML/XHTML: To increase accessibility, it is recommended that links have both a textual and a graphical representation. The recommendation is to use a single element containing both the text and the image, but the image should have an explicitly null alt attribute.
- HTML/XHTML: As a variation of the previous case, the alternative text of the image can be non-null if the image is an icon that conveys a visual message. For example, if the icon suggests that clicking the link opens a PDF file, the image's alt text should warn non-sighted users of this.
- HTML/XHTML: For applet elements, the text alternative will be created using both the alt attribute and by providing text inside the applet element. Both are necessary as support for the applet element varies among user agents.
- HTML/XHTML: For images used as form buttons, the alternative text will be provided via the alt attribute of the input element of type img.
- HTML/XHTML: input elements of type text, checkbox, radio, file, password, as well as textarea and select elements, can be associated with a label using a label element whose for attribute must have the same value as the id attribute of the labeled element. This method cannot be used to label submit, reset, img, or button type inputs.
- HTML/XHTML: In cases where a label element cannot be used (either due to lack of space or it doesn't make sense), the title attribute can be used to label form interaction fields.
- HTML/XHTML: object elements can contain the textual alternative within their body or can contain an image/video which in turn has its textual alternative provided via its own alt attribute.
1.3 Provide alternatives for time-based media
1.3.1. [A] Audio-only and Video-only (Prerecorded)
- All audio-only content must be accompanied by an augmented transcript with descriptive elements (related to elements necessary for understanding).
- All video-only content must be accompanied by an audio or text description.
Tips:
- General: The text alternative for a podcast can be its script (if available), enriched with descriptions of background sound elements.
- General: The text alternative for a PPT presentation converted to a silent video will contain both the description of the slides' content and any animations/effects necessary for understanding.
- General: The audio alternative for a PPT presentation converted to a silent video will describe the content of the slides, as well as explanations the presenter provided in support of certain points on those slides.
- HTML/XHTML: video elements can be associated with track elements in HTML5. The src attribute of the track element can specify a file containing the audio description of the film synchronized with the events in the film.
1.3.2. [A] Captions (Prerecorded)
- All prerecorded audio-video content must have synchronized captions, unless the audio-video content is itself a media alternative for text (and is clearly marked as such).
Tips: - HTML/XHTML: The track element can be used to provide captions for a video element.
1.3.3. [A] Audio Description or Media Alternative (Prerecorded)
- For all prerecorded audio-video content, an alternative must be provided—either a textual description (which is more than just a caption) or an audio one.
1.3.4. [AA] Captions (Live)
- All live media content with an audio component must be accompanied by synchronized captions.
Tips: - General: Real-time translation services can be used to generate such captions.
1.3.5. [AA] Audio Description (Prerecorded)
- For all prerecorded audio-video content, there must be an option to select an alternative soundtrack that contains the audio description of the presented images.
1.3.6. [AAA] Sign Language (Prerecorded)
- For all audio content, interpretation using sign language must also be provided.
1.3.7. [AAA] Extended Audio Description (Prerecorded)
- For any audio-video content where the background sound does not have long enough pauses to allow for a sufficiently comprehensive synchronized audio description, a media version segmented appropriately to accommodate an extended audio description must be provided.
1.3.8. [AAA] Media Alternative (Prerecorded)
- For any audio-video or video-only content, a descriptive alternative (text that can be read by a screen reader) must also be offered.
1.3.9. [AAA] Audio-Only (Live)
- For any audio-only content, a media alternative that relies on sight (real-time captions, live video with the equivalent in sign language, etc.) must also be offered.
1.4 Create content that can be presented in different ways without losing information or structure
1.4.1. [A] Info and Relationships
- Semantic markup in HTML code must be used appropriately (for headings, lists, emphasis, etc.).
- Tabular data must be structured in tables with titles and summaries.
- Form inputs must be marked with textual labels and grouped appropriately.
1.4.2. [A] Meaningful Sequence
- The reading and navigation order of the page must be logical; screen readers must be provided with access to information regarding the order of blocks on the page.
1.4.3. [A] Sensory Characteristics
- Instructions for understanding and operating content must not rely on visual characteristics (e.g., "it is in the left column" or "click on the red square").
- Instructions for understanding and operating content must not rely on auditory cues (e.g., "wait for the beep").
1.5 Make it easier for users to see and hear content including separating foreground from background
1.5.1. [A] Use of Color
- Color must not be used as the sole means of conveying information or administering interactions.
- To distinguish links from the rest of the text, it is not enough for them to just have a different color, unless the contrast with the background is at least 3:1 and the action of selecting or hovering over the link is accompanied by the appearance of a differentiator (such as an underline).
1.5.2. [A] Audio Control
- If a page contains audio that plays automatically, there must be mechanisms on the page to stop, pause, adjust, or mute the sound.
1.5.3. [AA] Contrast (Minimum)
- Text and images of text must have a minimum contrast of 4.5:1.
- Large text (at least 18pt or 14pt bold) must have a minimum contrast of 3:1.
- Background text or text in logos are exempt from these conditions.
1.5.4. [AA] Resize text
- The page must remain functional and readable when resized up to 200% of its original size.
1.5.5. [AA] Images of Text
- If information can be conveyed using only text (possibly formatted), the use of images containing that text should be avoided.
- An exception to this rule is when the image of the text can be dynamically generated and customized to the user's requirements.
1.5.6. [AAA] Contrast (Enhanced)
- Text and images of text must have a minimum contrast of 7:1.
- Large text (at least 18pt or 14pt bold) must have a minimum contrast of 4.5:1.
- Background text or text in logos are exempt from these conditions.
1.5.7. [AAA] Low or No Background Noise
- The background noise of a conversation must be nonexistent or able to be turned down to avoid causing problems in understanding words.
- If the background noise cannot be adjusted, it must have a volume at least 20 dB lower than that of the conversation.
1.5.8. [AAA] Visual Presentation
- For the visual presentation of text blocks, a mechanism must exist to allow adjustment so that the following rules are respected:
- The background and text color can be selected by the user.
- The width can be set to a maximum of 80 characters per line.
- Text alignment should NOT be justified (aligned to both left and right margins).
- Spacing between lines of a paragraph must be at least 1.5, and between paragraphs at least 2.5.
- Resizing text up to 200% of the initial size must not require horizontal scrolling.
- The background and text color can be selected by the user.
1.5.9. [AAA] Images of Text (No Exception)
- Images of text should never be used in place of actual text.
Simplifying Perceptibility with Wawsome
Manually implementing these rules can be a laborious and error-prone process. Wawsome is designed to automate and simplify this effort.
- AI-Powered Fixes: Our platform automatically adds descriptive alt-text to images and essential ARIA labels, ensuring that no non-text content remains invisible to assistive technologies.
- User Customization: The Wawsome widget gives visitors control. They can adjust contrast, colors, spacing, and text size, activate filters for color blindness, or choose predefined profiles for various needs, ensuring optimal readability for everyone.
Explore these powerful features and many more by starting a 7-day free trial today!
Conclusion
Perceptibility is more than a checklist of technical requirements; it is the foundation upon which a truly inclusive digital experience is built. By ensuring all users can perceive your content, you open the door to effective communication and demonstrate a genuine commitment to every member of your audience.
In our next article, we will tackle the second WCAG principle: Operability. We'll show you how to ensure that all users can navigate and interact with your site, regardless of the device or input method they use.