Listen to and watch WCAG: podcast and videos

Welcome to WCAG made simple. In this episode you will learn the basics: what is WCAG, who does it help, and how is it organised?

WCAG is an abbreviation. It stands for Web Content Accessibility Guidelines. They are published by the World Wide Web Consortium, or W3C for short. That is the organisation that also maintains the standards for HTML and CSS.

WCAG describes how websites and apps must be built so that everyone can use them. That includes people who are blind or have low vision. People who are deaf. People who cannot use a mouse. And people who need more time or simpler language.

But accessibility helps everyone. Captions help on a noisy train. Good contrast helps in bright sunlight. Large buttons help on a phone. And clear language helps anyone in a hurry.

The current version is called WCAG 2 point 2. It contains 86 rules. These rules are called success criteria. Each rule describes one thing that can be tested.

Every rule belongs to one of four principles. First: perceivable. Everyone must be able to take in the content with at least one sense. Second: operable. Everything must be usable, even without a mouse. Third: understandable. Text and behaviour must be clear and predictable. Fourth: robust. Content must work reliably with assistive technology such as screen readers.

Every rule also has a level. Level A is the bare minimum. Level double A is the usual standard, and the one that laws require. In Europe, for example, the European Accessibility Act. Level triple A is the highest level.

In the next four episodes we go through all the rules. One episode per principle. You can find the transcript of every episode on the website. Enjoy listening.

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.

Welcome to WCAG made simple. This episode is about principle 2: Operable. Everything must be usable – by keyboard, mouse, touch, voice or assistive technology, and without time pressure. This principle has 34 rules. We will go through them in order.

Guideline 2 point 1: Keyboard Accessible. Everything also works without a mouse.

2 point 1 point 1, Keyboard. Level A. Everything can be operated with the keyboard alone. Many people do not use a mouse: because of paralysis, tremor, blindness – or simply because it is faster.

2 point 1 point 2, No Keyboard Trap. Level A. Keyboard focus never gets stuck. Anyone who can tab into an area can also leave it with the keyboard.

2 point 1 point 3, Keyboard (No Exception). Level triple A. Truly everything works by keyboard – without the exceptions in rule 2.1.1, such as freehand drawing.

2 point 1 point 4, Character Key Shortcuts. Level A. Shortcuts made of a single letter, digit or symbol can be turned off, changed, or are only active while the component has focus. Otherwise speech input or a slip triggers actions by accident.

Guideline 2 point 2: Enough Time. People get the time they need.

2 point 2 point 1, Timing Adjustable. Level A. Time limits can be turned off, adjusted or extended. Some people need much longer to read and type.

2 point 2 point 2, Pause, Stop, Hide. Level A. Anything that starts moving, blinking or scrolling on its own, lasts more than 5 seconds and is shown alongside other content can be paused, stopped or hidden. The same goes for content that updates itself automatically. Motion is highly distracting.

2 point 2 point 3, No Timing. Level triple A. There are no time limits at all. Exceptions are real-time events and media that simply play.

2 point 2 point 4, Interruptions. Level triple A. Interruptions such as pop-ups and notifications can be postponed or turned off. Only emergencies may interrupt.

2 point 2 point 5, Re-authenticating. Level triple A. If a session expires and people have to log in again, they lose no data and can continue where they left off.

2 point 2 point 6, Timeouts. Level triple A. People are told in advance how much inactivity leads to data loss – unless data is kept for more than 20 hours.

Guideline 2 point 3: Seizures and Physical Reactions. Nothing flashes or moves in a way that can make people ill.

2 point 3 point 1, Three Flashes or Below Threshold. Level A. Nothing flashes more than three times per second – or the flashing is small and dim enough to stay below the thresholds. Strong flashing can trigger epileptic seizures – this can be life-threatening.

2 point 3 point 2, Three Flashes. Level triple A. Nothing ever flashes more than three times per second – with no exception for small or dim areas.

2 point 3 point 3, Animation from Interactions. Level triple A. Motion effects triggered by scrolling or clicking can be turned off. Parallax and zoom effects can cause dizziness and nausea.

Guideline 2 point 4: Navigable. People can find their way and always know where they are.

2 point 4 point 1, Bypass Blocks. Level A. Repeated areas such as navigation can be skipped. Nobody should press Tab 30 times on every page to reach the content.

2 point 4 point 2, Page Titled. Level A. Every page has a title that describes its topic or purpose. It shows in the browser tab and is the first thing a screen reader announces.

2 point 4 point 3, Focus Order. Level A. With the Tab key, focus moves in a sensible order – usually top to bottom and left to right.

2 point 4 point 4, Link Purpose (In Context). Level A. The link text – together with its surrounding sentence or paragraph – makes clear where the link goes.

2 point 4 point 5, Multiple Ways. Level double A. There are at least two ways to find a page – for example navigation and search, or navigation and a sitemap. Pages that are a step in a process, such as checkout, are exempt.

2 point 4 point 6, Headings and Labels. Level double A. Headings and labels clearly say what something is about. Screen reader users jump from heading to heading to skim a page.

2 point 4 point 7, Focus Visible. Level double A. You can always see which element has keyboard focus. Without a visible focus, using a keyboard is like using a mouse without a pointer.

2 point 4 point 8, Location. Level triple A. People can tell where they are within the website.

2 point 4 point 9, Link Purpose (Link Only). Level triple A. The link text makes sense entirely on its own – without the surrounding text. Screen readers can show links as a plain list.

2 point 4 point 10, Section Headings. Level triple A. Longer content is organised into sections with headings.

2 point 4 point 11, Focus Not Obscured (Minimum). Level double A. The focused element is not completely hidden – for example by a sticky header, a cookie banner or a chat window.

2 point 4 point 12, Focus Not Obscured (Enhanced). Level triple A. The focused element is fully visible. No part of it is hidden.

2 point 4 point 13, Focus Appearance. Level triple A. The focus indicator is large and strong enough: at least the size of a 2 pixel border around the element, with 3:1 contrast between focused and unfocused states.

Guideline 2 point 5: Input Modalities. Using touch, pointers and motion is simple and forgiving.

2 point 5 point 1, Pointer Gestures. Level A. Functions that need multi-finger or swipe gestures also work with a simple tap or click.

2 point 5 point 2, Pointer Cancellation. Level A. An action fires on release, not on press. That way an accidental press can be cancelled by sliding away.

2 point 5 point 3, Label in Name. Level A. The visible text of a control is also part of its name in code. Otherwise voice control fails: “Click Send” does not find the button.

2 point 5 point 4, Motion Actuation. Level A. Functions triggered by shaking or tilting the device are also available as a button – and motion control can be turned off.

2 point 5 point 5, Target Size (Enhanced). Level triple A. Click and tap targets are at least 44 × 44 CSS pixels.

2 point 5 point 6, Concurrent Input Mechanisms. Level triple A. People can switch between input methods at any time: touch, mouse, keyboard, stylus, voice.

2 point 5 point 7, Dragging Movements. Level double A. Anything done by dragging can also be done with simple clicks. Dragging while holding is nearly impossible with a tremor or a mouth stick.

2 point 5 point 8, Target Size (Minimum). Level double A. Click and tap targets are at least 24 × 24 CSS pixels – or have enough spacing that you do not hit the neighbour by accident.

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

Welcome to WCAG made simple. This episode is about principle 3: Understandable. Text and behaviour must be clear and predictable. Mistakes are easy to avoid and to fix. This principle has 21 rules. We will go through them in order.

Guideline 3 point 1: Readable. Language is declared and text is understandable.

3 point 1 point 1, Language of Page. Level A. The main language of the page is set in code. Only then does a screen reader use the right pronunciation – otherwise English sounds as if read by a German voice.

3 point 1 point 2, Language of Parts. Level double A. Passages in a different language are also marked in code.

3 point 1 point 3, Unusual Words. Level triple A. Jargon, idioms and unusual words are explained.

3 point 1 point 4, Abbreviations. Level triple A. Abbreviations are expanded or explained.

3 point 1 point 5, Reading Level. Level triple A. If text is harder to read than expected after about 9 years of school, there is a simpler version or a summary.

3 point 1 point 6, Pronunciation. Level triple A. Where the meaning of a word depends on its pronunciation, the pronunciation is given.

Guideline 3 point 2: Predictable. Pages behave the way people expect.

3 point 2 point 1, On Focus. Level A. Just because an element receives focus, nothing unexpected happens: no page change, no new window, no submit.

3 point 2 point 2, On Input. Level A. Selecting or typing something does not automatically cause anything unexpected – unless people were told beforehand.

3 point 2 point 3, Consistent Navigation. Level double A. Navigation that appears on several pages is in the same order everywhere.

3 point 2 point 4, Consistent Identification. Level double A. Things with the same function are named and labelled consistently everywhere.

3 point 2 point 5, Change on Request. Level triple A. Major changes happen only when someone triggers them – or they can be turned off. No automatic redirects, no unrequested new windows.

3 point 2 point 6, Consistent Help. Level A. If help options such as contact details, chat or FAQs appear on several pages, they are in the same order relative to other content on each page.

Guideline 3 point 3: Input Assistance. Forms help people avoid and correct mistakes.

3 point 3 point 1, Error Identification. Level A. When input is wrong, text says which field is affected and what is wrong. A red border alone is not enough.

3 point 3 point 2, Labels or Instructions. Level A. Every input has a visible label. If a specific format is required, it is stated beforehand.

3 point 3 point 3, Error Suggestion. Level double A. Error messages do not just say something is wrong, they also say how to get it right.

3 point 3 point 4, Error Prevention (Legal, Financial, Data). Level double A. For important actions such as purchases, contracts, test answers or deleting data, people can review, correct or undo their input.

3 point 3 point 5, Help. Level triple A. Help for inputs and tasks is available right where it is needed.

3 point 3 point 6, Error Prevention (All). Level triple A. For all forms – not just important ones – people can review, correct or undo their input.

3 point 3 point 7, Redundant Entry. Level A. What someone has already entered in a process does not have to be typed again. It is pre-filled or offered for selection.

3 point 3 point 8, Accessible Authentication (Minimum). Level double A. Logging in does not require a memory or thinking test: no typing a password from memory, no puzzle – unless there is an alternative or help. Still allowed at this level: recognising objects or content you provided yourself.

3 point 3 point 9, Accessible Authentication (Enhanced). Level triple A. Logging in works with no memory or thinking task at all – not even recognising objects or personal pictures.

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

Welcome to WCAG made simple. This episode is about principle 4: Robust. Content must work reliably with browsers and assistive technology such as screen readers – today and tomorrow. This principle has 2 rules. We will go through them in order.

Guideline 4 point 1: Compatible. Controls expose name, role and state to assistive technology.

4 point 1 point 2, Name, Role, Value. Level A. Every control tells assistive technology what it is called (name), what it is (role) and what state it is in (value) – for example “Menu, button, expanded”.

4 point 1 point 3, Status Messages. Level double A. Messages such as “Saved”, “3 results” or “Added to cart” are announced by the screen reader without moving focus there.

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

What is WCAG?

What is WCAG? The abbreviation stands for Web Content Accessibility Guidelines. These are the global rules for accessible websites. In two minutes you will know the basics.

Who is it for?

Who are the rules for? For people who are blind or have low vision. For people who are deaf. For people who cannot use a mouse. And in the end for everyone. Because good contrast and clear language help us all.

Four principles

WCAG has four principles. First: perceivable. Second: operable. Third: understandable. Fourth: robust. Each of the 86 rules belongs to one of these principles.

Perceivable and operable

Perceivable means, for example: images have text alternatives and videos have captions. Operable means: everything also works with the keyboard alone.

Understandable and robust

Understandable means: clear language and error messages that say what to do. Robust means: clean code that assistive technology such as screen readers can understand.

Three levels

Every rule has one of three levels. Level A is the minimum. Level double A is the standard that laws require. Level triple A is the highest level.

Your first test

Your first test takes one minute. Put the mouse away. Use your website with the Tab key only. Can you always see where you are? Can you reach everything?

Learn more

Learn more at wcag dot dehl dot net. There you will find all 86 rules explained simply, with demos to try and a free checker.

New in WCAG 2.2

New in WCAG 2 point 2. This version was published in October 2023 and brings 9 new rules. We will go through them in order.

2.4.11 Focus Not Obscured (Minimum)

Rule 2 point 4 point 11, Focus Not Obscured (Minimum), Level AA. The focused element is not completely hidden – for example by a sticky header, a cookie banner or a chat window. This especially helps: People with motor disabilities and People with low vision.

2.4.12 Focus Not Obscured (Enhanced)

Rule 2 point 4 point 12, Focus Not Obscured (Enhanced), Level AAA. The focused element is fully visible. No part of it is hidden. This especially helps: People with motor disabilities and People with low vision.

2.4.13 Focus Appearance

Rule 2 point 4 point 13, Focus Appearance, Level AAA. The focus indicator is large and strong enough: at least the size of a 2 pixel border around the element, with 3:1 contrast between focused and unfocused states. This especially helps: People with low vision and People with motor disabilities.

2.5.7 Dragging Movements

Rule 2 point 5 point 7, Dragging Movements, Level AA. Anything done by dragging can also be done with simple clicks. Dragging while holding is nearly impossible with a tremor or a mouth stick. This especially helps: People with motor disabilities.

2.5.8 Target Size (Minimum)

Rule 2 point 5 point 8, Target Size (Minimum), Level AA. Click and tap targets are at least 24 × 24 CSS pixels – or have enough spacing that you do not hit the neighbour by accident. This especially helps: People with motor disabilities and People with low vision.

3.2.6 Consistent Help

Rule 3 point 2 point 6, Consistent Help, Level A. If help options such as contact details, chat or FAQs appear on several pages, they are in the same order relative to other content on each page. This especially helps: People with cognitive disabilities.

3.3.7 Redundant Entry

Rule 3 point 3 point 7, Redundant Entry, Level A. What someone has already entered in a process does not have to be typed again. It is pre-filled or offered for selection. This especially helps: People with cognitive disabilities and People with motor disabilities.

3.3.8 Accessible Authentication (Minimum)

Rule 3 point 3 point 8, Accessible Authentication (Minimum), Level AA. Logging in does not require a memory or thinking test: no typing a password from memory, no puzzle – unless there is an alternative or help. Still allowed at this level: recognising objects or content you provided yourself. This especially helps: People with cognitive disabilities and People with dyslexia.

3.3.9 Accessible Authentication (Enhanced)

Rule 3 point 3 point 9, Accessible Authentication (Enhanced), Level AAA. Logging in works with no memory or thinking task at all – not even recognising objects or personal pictures. This especially helps: People with cognitive disabilities.

And one rule fewer

And one rule has gone: 4 point 1 point 1, Parsing, was removed. You can find all rules with examples at wcag dot dehl dot net.