Skip to content
JustA11ya11y

Level 1

Lesson 04

Perceivable

Can everyone access the information?

  • About 8 min
  • No experience needed

Learning goal

By the end of this lesson you should understand:

  1. 1.What the WCAG principle “Perceivable” means.
  2. 2.Why important images need meaningful alternatives.
  3. 3.Why colour should never be the only signal.
  4. 4.How captions and transcripts open up audio and video.
  5. 5.Why content must stay usable when people adapt it.

Lesson 4 of 10

Section 4.1

See beyond the screen

Imagine this

You’re looking at a website.

You see a beautiful image.

But someone using a screen reader doesn’t see the image.

They might hear:

“Image.”

Nothing else.

How could that person know what the image communicates?

Important information inside an image needs to be available in another way too — usually as text.

Section 4.2

Images need meaning

Alternative text, often called alt text, is text that communicates the purpose or meaning of an image when the image itself can’t be perceived.

Poor alt text

“IMG_4821.jpg”

Better alt text

“A red bicycle leaning against a brick wall.”

  • Alt text isn’t about describing every detail.
  • Ask: “Why is this image here?”
  • If an image communicates important information, that information should be available another way.
  • If an image is purely decorative, it may not need meaningful alternative text.
Try it — the water cycle diagramAn educational diagram explains the water cycle: water evaporates, forms clouds, falls as rain, and flows back to the sea. What should you do?

Section 4.3

Don’t make colour do all the work

The scenario

A form uses red to mean required and green to mean optional.

There are no labels and no other indicators.

What is the problem?

If someone cannot distinguish those colours — or is listening to the page instead of seeing it — the meaning disappears completely.

Better example

  • Required
  • Optional

The same information, written as words, works for everyone.

Colour can help communicate information — but it shouldn’t be the only way.

Spot the accessible designWhich design communicates meaning without relying on colour alone?

Section 4.4

Contrast matters

Poor contrast

Light grey text on a white background.

Better contrast

Text with clearly sufficient contrast against its background.

Who can benefit from good contrast?

  • People with low vision
  • Older users
  • Someone using a screen in bright sunlight
  • Someone dealing with poor lighting
  • People experiencing changes in vision as they age

Good contrast can benefit people in many different situations.

Quick checkWho can benefit from good contrast?

Source: W3C — Web Accessibility Perspectives(opens in a new tab)

Section 4.5

Video isn’t just pictures

Imagine a video.

You can see everything.

But you can’t hear the audio.

What could help?

What helps:Captions.

This can help:

  • People who are deaf or hard of hearing
  • People watching somewhere noisy
  • People watching somewhere quiet
  • People learning another language
  • People who prefer reading along

One accessibility feature can help many different people.

Section 4.6

What about audio?

Important instructions are provided only as audio.

Someone can’t hear them.

What could provide another way to access the information?

What helps:A text alternative or transcript.

If important information is only available through one sensory channel, some people may be excluded.

Section 4.7

Voice recognition

Some people interact with computers using voice recognition.

“Search for nineteenth century architecture.”

“Send email to Jack.”

“Place order.”

Essential for some:Voice recognition can be essential for some people with physical disabilities.

This can help:

  • Temporary injuries
  • An injured arm
  • Repetitive strain injury
  • Personal preference
  • Cooking
  • Navigating
  • Carrying something
  • Multitasking

Accessibility technology can become everyday technology.

Section 4.8

Text-to-speech

Text-to-speech can be essential for people who are blind.

A busy parent can also listen to an article while cooking dinner.

Also benefits:People who read differently, or who simply prefer listening.

This can help:

  • People with dyslexia
  • People who have difficulty reading
  • People who are learning
  • People who prefer listening
  • People who are multitasking

A feature can be essential for one person and convenient for another.

Section 4.9

What happens when we zoom?

Someone needs larger text, so they increase the text size.

But now text overlaps, buttons disappear, content gets cut off, and the information becomes impossible to use.

Is making text bigger enough?

Answer:No.

Content should remain usable when people adjust how it is displayed.

Section 4.10

One message, different ways

“Your appointment is tomorrow at 10 AM.”

  • Text

    Read on screen.

  • Speech

    Spoken aloud.

  • Enlarged text

    Resized to suit the reader.

  • Assistive technology

    Read by a screen reader or braille display.

The goal isn’t to force everyone to use every format.

People should be able to access the information in a way that works for them.

Section 4.11

Perceivable detective

Four short cases. Choose the fix that makes the information perceivable — you can retry any case.

0 of 4 cases solved.

  1. Problem 1 of 4An important image has no alt text.
  2. Problem 2 of 4A video contains important spoken information but has no captions.
  3. Problem 3 of 4A chart communicates information using red and green only.
  4. Problem 4 of 4Text becomes unusable when enlarged.

Section 4.12

Accessibility perspective

Web accessibility is essential for some people — and useful for everyone.

  • Captions

    Essential:Essential for someone who can’t hear.

    Useful:Useful for someone in a noisy environment.

  • Text-to-speech

    Essential:Essential for someone who is blind.

    Useful:Useful for someone multitasking.

  • Voice control

    Essential:Essential for someone with a physical disability.

    Useful:Useful when someone’s hands are busy.

  • Good contrast

    Essential:Important for people with low vision.

    Useful:Useful in difficult lighting conditions.

A better questionInstead of asking “How many disabled people will use this?” what could we ask?

Section 4.13 · The big idea

Perceivable doesn’t mean “make everything visible.”

Make information available in ways people can perceive and access.

  • Can I see it?
  • Can I hear it?
  • Can I listen to it another way?
  • Can assistive technology access it?
  • Can I enlarge it?
  • Does the meaning depend only on colour?

Knowledge check

Check what you understood

Five short questions. You can retry any question — this is for understanding, not for scoring.

Question 1 of 5What does Perceivable mean?
Question 2 of 5An important image has no useful alternative text. What could be missing?
Question 3 of 5Why shouldn’t colour be the only way to communicate information?
Question 4 of 5Which can make video content more accessible?
Question 5 of 5Who can benefit from text-to-speech?

Lesson 4 takeaways

By now, you should know:

  • Perceivable is the first WCAG principle we explore.It asks a simple question: can everyone access the information?
  • Important images may need appropriate alt text.Ask why the image is there, then make that meaning available as text.
  • Meaning shouldn’t depend on colour alone.Add a label, an icon or a pattern so the message survives without colour.
  • Captions and transcripts can provide alternative access.They open up audio and video information to far more people.
  • Content should remain usable when people resize or adapt it.Bigger text is only helpful if the page still works.
  • Accessibility features can benefit people in many situations.Essential for some people, useful for everyone.
Back to Level 1

Explore the sources

Explore the sources

This lesson is an educational interpretation written in our own plain language, based on the material below. Not every sentence comes directly from a source.

You’ve learned how information can be made perceivable.

But accessibility doesn’t stop at seeing, hearing, or accessing information.

What about actually using a website?

Can everyone navigate it?

Can everyone operate its buttons and controls?

Continue → Meet POUR