Episode 2: Perceivable – all 29 rules

Welcome to WCAG made simple. This episode is about principle 1: Perceivable. Everyone must be able to take in the content with at least one sense: sight, hearing or touch. This principle has 29 rules. We will go through them in order.

Guideline 1 point 1: Text Alternatives. Everything that is not text gets a description in text.

1 point 1 point 1, Non-text Content. Level A. Images, icons, charts and other non-text content need a text alternative that serves the same purpose. Purely decorative images are hidden from assistive technology.

Guideline 1 point 2: Time-based Media. Audio and video need captions, descriptions or transcripts.

1 point 2 point 1, Audio-only and Video-only (Prerecorded). Level A. An audio-only recording has a transcript. A video without sound has a text description or an audio track that explains what can be seen.

1 point 2 point 2, Captions (Prerecorded). Level A. Prerecorded videos with sound have captions. They show spoken words and important sounds, for example “[phone rings]”.

1 point 2 point 3, Audio Description or Media Alternative (Prerecorded). Level A. What can only be seen in a video must be available another way: as audio description or as a full text version of the video.

1 point 2 point 4, Captions (Live). Level double A. Live videos with sound also have captions that run in real time.

1 point 2 point 5, Audio Description (Prerecorded). Level double A. Prerecorded videos have audio description: a voice describes important visuals during pauses in the dialogue.

1 point 2 point 6, Sign Language (Prerecorded). Level triple A. Prerecorded videos with sound are also available with sign language interpretation. For many deaf people it is their first language.

1 point 2 point 7, Extended Audio Description (Prerecorded). Level triple A. If the pauses in the dialogue are too short for description, the video pauses briefly so there is enough time to describe.

1 point 2 point 8, Media Alternative (Prerecorded). Level triple A. Every video has a complete text version: everything said and everything shown. This especially helps deafblind people.

1 point 2 point 9, Audio-only (Live). Level triple A. Live audio without video, such as live radio or a live podcast, also has a real-time text version.

Guideline 1 point 3: Adaptable. Structure and meaning live in the code – not only in the looks.

1 point 3 point 1, Info and Relationships. Level A. What looks like a heading, list, table or form field must also be marked up that way in code. That is how assistive technology recognises structure.

1 point 3 point 2, Meaningful Sequence. Level A. The order in the code makes sense. A screen reader reads in code order – not the way things are arranged on screen.

1 point 3 point 3, Sensory Characteristics. Level A. Instructions do not rely only on shape, colour, size, position or sound. “Click the round button on the right” does not help someone who cannot see it.

1 point 3 point 4, Orientation. Level double A. Content works in portrait and landscape. Some people have their device fixed to a wheelchair and cannot rotate it.

1 point 3 point 5, Identify Input Purpose. Level double A. Form fields for personal data state in code what they expect. Then the browser can fill them in automatically.

1 point 3 point 6, Identify Purpose. Level triple A. The purpose of regions, buttons and links can be determined from code. Tools can then show familiar symbols or hide what is not essential.

Guideline 1 point 4: Distinguishable. Content is easy to see and hear: contrast, size, spacing.

1 point 4 point 1, Use of Color. Level A. Colour is never the only way to convey something. About one in twelve men has difficulty telling red from green.

1 point 4 point 2, Audio Control. Level A. Sound that starts by itself and plays for more than 3 seconds can be paused or turned down. Otherwise it drowns out the screen reader.

1 point 4 point 3, Contrast (Minimum). Level double A. Text stands out clearly from its background: at least 4.5:1 for normal text and 3:1 for large text (24 px and up, or 18.66 px bold).

1 point 4 point 4, Resize Text. Level double A. Text can be enlarged to 200% without losing content or functionality.

1 point 4 point 5, Images of Text. Level double A. Text is real text, not a picture of text. Real text can be enlarged, recoloured and read aloud. Logos are exempt.

1 point 4 point 6, Contrast (Enhanced). Level triple A. For especially good readability: at least 7:1 for normal text and 4.5:1 for large text.

1 point 4 point 7, Low or No Background Audio. Level triple A. Speech recordings have no background sounds or only very quiet ones – at least 20 decibels quieter than the speech.

1 point 4 point 8, Visual Presentation. Level triple A. People can set up blocks of text so they are comfortable to read: their own colours, at most 80 characters per line, not justified, line spacing of at least 1.5, larger paragraph spacing, and 200% enlargement without sideways scrolling.

1 point 4 point 9, Images of Text (No Exception). Level triple A. Images of text are not used at all – except as pure decoration or where essential, such as a logo.

1 point 4 point 10, Reflow. Level double A. At 320 CSS pixels wide (equal to 1280 pixels at 400% zoom) content can be read without scrolling in two directions. Exempt: content that needs two dimensions, such as data tables, maps and diagrams.

1 point 4 point 11, Non-text Contrast. Level double A. Controls and important graphics need contrast too: at least 3:1 for input borders, icons, focus rings and chart lines.

1 point 4 point 12, Text Spacing. Level double A. People can increase spacing without text being cut off or overlapping: line height 1.5 times, paragraph spacing 2 times, letter spacing 0.12 times and word spacing 0.16 times the font size.

1 point 4 point 13, Content on Hover or Focus. Level double A. Tooltips and pop-up content that appear on hover or focus can be dismissed (Esc), stay when the pointer moves onto them, and do not vanish on their own.

Those were all the rules for the principle Perceivable. On the website you will find an example and a practical tip for every rule. Thank you for listening.