We closed Module 2 by showing that real accessibility failures fall into four families: things the user cannot perceive, things they cannot operate, things they cannot understand, and things that are not robust. Those four families are, precisely, the POUR principles of WCAG. In this module we walk through them one by one to understand what each one requires. We start with the first and most fundamental: Perceivable. If Marta (blind, NVDA), Sofía (low vision, 300% zoom), or Diego (deaf) cannot perceive the information, everything else is pointless: there is nothing to operate or understand. Perceivable means that information and user interface components must be presented in ways people can perceive, and that no piece of information may depend on a single sense.

1. What the Perceivable principle requires
2. Guideline 1.1: Text Alternatives
3. Guideline 1.2: Time-based Media
4. Guideline 1.3: Adaptable
5. Guideline 1.4: Distinguishable
6. Success criteria summary table
7. Common mistakes and tips
8. Exercises
9. Conclusion

The core idea is sensory redundancy: any information conveyed through one channel (an image, a sound, a color, a position on screen) must also be available through another channel that the user can actually use. A screen reader turns text into speech or braille, but it cannot "see" a photo or "hear" a video for you. The Perceivable principle is organized into four guidelines.

Provide text alternatives for all non-text content, so it can be transformed into other formats (speech, braille, symbols, large print).

• 1.1.1 Non-text Content (Level A): every image, icon, chart, graphical button, or non-text control needs a text alternative that serves its purpose. Decorative images must be marked as such so the reader ignores them.

In Cursalia, each catalog card carries a cover image for the course. If that image lacks a text alternative, Marta hears "image" or the file name, and has no idea which course it is. The alternative must describe the function, not decorate: for a cover, the course title that is already in the link is usually enough. A "padlock" icon that signals a locked course needs an alternative ("Locked course"), whereas a background flourish is marked as decorative.

How to write good alternatives (useful alt text, empty alt, complex images) is developed in Module 5: Text Alternatives for Images. Here we only set the requirement.

This covers time-based content: audio and video. Cursalia's video-lesson player falls squarely here. The criteria scale by level:

• 1.2.1 Audio-only and Video-only (Prerecorded) (A): a transcript for the audio; a text alternative or audio track for silent video.
• 1.2.2 Captions (Prerecorded) (A): videos with speech need synchronized captions. Without them, Diego cannot access the lesson.
• 1.2.3 Audio Description or Media Alternative (Prerecorded) (A): describe the important visual information that is not spoken.
• 1.2.4 Captions (Live) (AA): captions on live broadcasts too (a Cursalia webinar).
• 1.2.5 Audio Description (Prerecorded) (AA): an audio track that narrates the relevant visuals for those who cannot see.

The actual implementation of captions, transcripts, and audio description in the player is addressed in Module 5: Video and Audio.

Content must be presentable in different ways (for example, with a screen reader or a user style sheet) without losing information or structure.

• 1.3.1 Info and Relationships (A): the visual structure (headings, lists, tables, field groups) must live in the markup, not just in the appearance. If a section "title" is only large bold text, Marta does not detect it as a heading and loses the ability to navigate by structure (Module 2).
• 1.3.2 Meaningful Sequence (A): the reading order of the code must make sense. In the student dashboard (SPA), if CSS places the progress bar before the title but it comes after it in the DOM, the reader will read it in a confusing order.
• 1.3.4 Orientation (AA): do not force portrait or landscape only. Sofía may use her tablet fixed in a landscape stand.
• 1.3.5 Identify Input Purpose (AA): in the enrollment form, fields such as name, email, or phone must declare their purpose (the autocomplete attribute) so the browser and assistive technologies can fill them in or adapt them.

The semantic HTML that makes 1.3.1/1.3.2 possible is Module 4: Semantic HTML.

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

• 1.4.1 Use of Color (A): color cannot be the only means of conveying information. In the catalog filter, marking "new" courses only with a green dot leaves out anyone who cannot distinguish the color; add a label or icon.
• 1.4.3 Contrast (Minimum) (AA): text and text in images with a minimum ratio of 4.5:1 (3:1 for large text). This is where Cursalia's brand palette is put to the test: a brand gray on white may fall below the threshold.
• 1.4.4 Resize Text (AA): text must be able to scale up to 200% without losing content or functionality.
• 1.4.5 Images of Text (AA): use real text, not images of text (except logos). A Cursalia banner with the price "baked into" an image does not scale and cannot be read.
• 1.4.10 Reflow (AA): content must reflow into a single column at 320 px (equivalent to 400% zoom) with no horizontal scrolling. Key for Sofía at 300%.
• 1.4.11 Non-text Contrast (AA): field borders, status icons, and component boundaries also need 3:1. The filter dropdown's border must stand out from the background.
• 1.4.12 Text Spacing (AA): if the user increases line height or letter/word/paragraph spacing, no content should be lost. This helps Hugo (dyslexia).

In Cursalia, the brand palette is defined once and reused across buttons, links, and cards; validating its contrast centrally avoids repeating the mistake on every surface.

Calculating and fixing contrast and text resizing are implemented in Module 4: Contrast and Resizing.

• Confusing "no alt" with "empty alt". Omitting alt leaves the reader announcing the file name; alt="" marks the image as decorative on purpose. They are different things.
• Relying on color for information. "Fields in red are required" fails 1.4.1. Add text or a symbol.
• Believing that 1.4.3 (text contrast) covers everything. Borders and icons are governed by 1.4.11, with a different threshold (3:1). They are separate criteria.
• Putting text in images for design convenience. This breaks 1.4.5 and 1.4.4 at once; real text always wins.
• Tip: review Perceivable with two quick moves: navigate by structure alone with the reader, and turn the zoom up to 400%. If anything disappears or shifts out of place, you have a perceivable failure.

Exercise 1. On a catalog card, courses that are sold out are shown with the cover tinted gray. There is no other indicator. Which criterion is violated, and how do you fix it at the requirement level?

Exercise 2. The brand team proposes light gray secondary text #9AA0A6 on a white background for the card descriptions. Which criterion must be verified and what threshold applies? Why is this a good place to fix it once?

Exercise 3. Classify each item by the Guideline 1.2 criterion that applies to it: (a) a prerecorded video lesson with narration, (b) a live webinar, (c) a Cursalia audio podcast.

Solution 1. This violates 1.4.1 Use of Color (A): the "sold out" state is conveyed by color alone. Fix requirement: add a non-color signal, for example a "Sold out" text label or an icon with its text alternative, in addition to the tint. (The visual implementation is covered in Module 4.)

Solution 2. You must verify 1.4.3 Contrast (Minimum), Level AA, with a threshold of 4.5:1 because it is normal text. #9AA0A6 on white is around 2.6:1, so it does not pass. Since the brand palette is defined centrally and reused across all cards, fixing the color token once propagates the fix to the entire catalog.

Solution 3. (a) Prerecorded video with narration: 1.2.2 Captions (A) and 1.2.5 Audio Description (AA). (b) Live webinar: 1.2.4 Captions (Live) (AA). (c) Audio-only podcast: 1.2.1 (A) via a transcript.

The Perceivable principle guarantees that nothing depends on a single sense: text alternatives for non-text content, captions and transcripts for time-based media, structure in the markup, and enough contrast, scaling, and reflow for visual content. We have set out what each criterion requires and deferred the how to Modules 4 and 5. But perceiving the content is not enough: Lucía has to be able to operate it with the keyboard alone, and no one should get trapped in a menu or lose focus. In the next lesson, 03-02 Operable, we will look at what WCAG requires so the entire interface can be handled without a mouse and navigated with clear order and visible focus.