Perceivable: nobody misses information

What it is

Perceivable is the first of the four principles of WCAG. Information must be on your website in such a way that everyone can perceive it.

It has four guidelines: text for images (1.1), video and audio (1.2), a structure that can be adapted (1.3) and content that is easy to tell apart (1.4). Under these are 20 success criteria at level A and AA: requirements you can test a website against. The most important ones are below, with their number in WCAG 2.2.

Why it matters

People who are blind often use a screen reader: software that reads the page aloud. For an image, it reads out the text you added to it.

Some people with low vision zoom in a lot or use a screen magnifier. If the text adjusts to the width of the screen, they simply read from top to bottom. If not, they have to scroll back and forth on every line, and they easily lose track.

How to do it

Steps 1, 2, 5 and 8 are about what you put on the website yourself: images, videos and text. The other steps are mainly work for your web developer, but you can check them.

1. Give every image a text alternative (1.1.1 Non-text Content, level A). This alt text says what the image means, not exactly what it looks like. For a photo of the entrance of the neighbourhood team: “Entrance with blue door next to the library”. Words like “image of” are not needed, because a screen reader already says that. Is an image only decoration? Then leave the alt text empty. A diagram gets a short alt text, and you also put the steps in it underneath as a numbered list. The Alt text helper asks a few questions and uses them to draft an alt text with you.
2. Caption videos (1.2.2 Captions (Prerecorded), A). Are you broadcasting live, such as a webinar for informal carers? Then provide live captions (1.2.4 Captions (Live), AA). What can only be seen on screen in a recorded video, you describe with an extra spoken text (1.2.5 Audio Description (Prerecorded), AA). Do you only have audio, such as a podcast? Then add a written transcript (1.2.1 Audio-only and Video-only (Prerecorded), A).
3. Build the structure into the code (1.3.1 Info and Relationships, A). Use real headings and lists, not just bold text, so a screen reader can jump from heading to heading. The Structuurcheck shows which headings are in the code.
4. Let the browser help with forms (1.3.5 Identify Input Purpose, AA). Give fields such as name, email address and phone number a standard code. The browser can then fill them in itself, and that saves typing and remembering.
5. Don’t use colour alone (1.4.1 Use of Color, A). “Required fields are red” doesn’t work for people who are colour-blind, so also add a word or symbol. The same applies to an instruction that relies only on shape or position, such as “click the circle on the right” (1.3.3 Sensory Characteristics, A). With the Colour-blind view, you can see roughly how someone who is colour-blind sees your page.
6. Make sure there is enough contrast (1.4.3 Contrast (Minimum), AA). Contrast is the difference in light and dark between text and background. Normal text needs at least 4.5:1, large text (18 point, or 14 point bold) at least 3:1. This also applies to the example text in an empty input field. The border of an input field and icons that mean something need at least 3:1 (1.4.11 Non-text Contrast, AA). The Colour-blind view works out the ratio for two colours.
7. Let people make text bigger (1.4.4 Resize Text, AA). At 200% zoom, everything still works. And on a screen 1280 pixels wide, you can zoom in to 400% without scrolling sideways (1.4.10 Reflow, AA). If someone sets more space between lines, letters and words themselves, no text disappears (1.4.12 Text Spacing, AA).
8. Don’t put text in an image (1.4.5 Images of Text, AA). With a scanned leaflet, nobody can change the letters, the line spacing or the colours. A logo is allowed.
9. Let the page turn with the screen (1.3.4 Orientation, AA). A page works upright and on its side, on a phone and on a tablet, because some people have their tablet fixed to their wheelchair, in one position.

Points to watch

• Check for each place whether an alt text is right. The same photo can give information on one page and be only decoration on another. A testing tool can see whether an alt text is missing, not whether it is right.
• Check automatic captions. They often contain mistakes. If the word “not” is missing in one place, the caption says the opposite of what was said. So use them as a starting point and correct them yourself.
• Put information on a web page rather than in a PDF. You can also apply the WCAG requirements to documents, but many organisations find it hard to make a PDF accessible. If it has to be a document after all, read Making accessible documents.

Find out more

• The other principles: operable, understandable and robust.
• Making your website accessible: the steps for your organisation.
• Accessible website checklist