Lesson 02 · Part 1 · Foundations

Understanding web accessibility

Web accessibility means people can use your site whatever their body, tools or situation. This lesson explains who is affected, which tools they use, and the rules (WCAG) that tell you what "accessible" means.

In one minute

A disability can be permanent (born deaf), temporary (broken arm) or situational (bright sun, holding a baby).
Assistive technology is any tool that helps a person use a computer. Examples: screen readers, magnifiers, voice control.
Screen readers read the accessibility tree. The browser builds that tree from your HTML.
WCAG is the rule book. Its four principles spell POUR: Perceivable, Operable, Understandable, Robust.
Level AA is the usual target. Many laws point to it.

In plain words

Think of a school with stairs only. A student in a wheelchair cannot reach class. Neither can a student with a sprained ankle this week. A ramp fixes both. It also helps the canteen staff with a heavy trolley. Web accessibility is building ramps into websites.

1. The problem: one order that never happens

Priya is blind. She uses a screen reader: software that reads the screen aloud and is controlled by the keyboard. She tries to order dinner on a food-delivery app.

What the app did

Bad

<img src="paneer-tikka.jpg">
<div class="price">₹240</div>
<div class="btn" onclick="order()">
  Place order
</div>

"paneer-tikka.jpg" "₹240" (then silence: the order "button" is never reached)

What it should do

Fixed

<img src="paneer-tikka.jpg"
     alt="Paneer tikka, 6 pieces">
<p>₹240</p>
<button type="button">Place order</button>

"Paneer tikka, 6 pieces, image" "₹240" "Place order, button"

The broken version looks fine with a mouse. But Priya hears a file name, and Tab never lands on "Place order". She cannot eat from this app. The business loses a customer.

Check

Name two things in the bad code that cost Priya her dinner. (Answer: no alt text, and a div instead of a button.)

2. Disability is about situations, not only people

A barrier is anything that stops a person finishing a task. Barriers come from a mismatch between a person and a design. That mismatch can last forever, for a few weeks, or for a few minutes.

Kind	Meaning	Example
Permanent	Lasts for life, or a very long time.	Blind, Deaf, one arm, low vision.
Temporary	Lasts days or weeks, then goes away.	Broken arm, eye drops after an eye test, ear infection.
Situational	Caused by where you are or what you are doing.	Bright sun on your phone, a noisy bus, holding a baby.

One fix usually helps all three groups. Try it.

Step 1. Pick a feature. See who it helps.

Who benefits from captions

Step 2. Sort each situation. Choose one answer per line.

3. How assistive technology works

Assistive technology (AT) is hardware or software that helps a disabled person use a device. Each tool needs something different from your page.

Tool	Who often uses it	What it needs from your page
Screen reader (NVDA, JAWS, VoiceOver, TalkBack)	Blind and low-vision people	Correct roles, names, headings and alt text.
Keyboard only	People who cannot use a mouse; screen reader users too	Every control reachable with `Tab`, and a visible focus ring.
Zoom and screen magnifiers	Low-vision people	Text that grows without breaking the layout. No text baked into images.
Voice control (Voice Control, Voice Access, Dragon)	People who cannot use their hands well	Visible labels that match the control's name, so "click Place order" works.
Switch device	People who can only make one or two movements	Everything reachable in a sensible order, with no tight time limits.

Screen readers do not look at pixels. The browser turns your HTML into an accessibility tree. Each item in the tree has a role (what it is), a name (what it is called) and sometimes a state (checked, expanded).

Step 1. Switch the markup of this bookshop card. It looks the same both ways.

Step 2. Press Tab into the card. Count how many stops you get.

The HTML

Accessibility tree (simplified)

Try it yourself

In lab 2, choose "Built with divs" and press Tab. Where does focus go? Now switch and try again.

4. WCAG in plain words: POUR

WCAG means Web Content Accessibility Guidelines. It is written by the W3C, the group that writes web standards. The current version is WCAG 2.2. Its rules are called success criteria, and each has a number like 1.1.1.

All the rules sit under four principles. The first letters spell POUR.

P · Perceivable

People can sense the content: see it, hear it, or feel it on a braille display.

A food photo has alt text, like "Masala dosa with chutney" (1.1.1).
A cooking video has captions (1.2.2).

O · Operable

People can use every control, whatever device they use.

The "Add to basket" button works with the keyboard (2.1.1).
You can always see where keyboard focus is (2.4.7).

U · Understandable

People can understand the content and predict what controls do.

The page says its language, so the reader pronounces words correctly (3.1.1).
An error says what went wrong: "Enter a 6-digit PIN code" (3.3.1).

R · Robust

The code is clear enough for browsers and assistive tech to read, now and later.

A custom switch exposes its role, name and state (4.1.2).
"Order placed" status messages are announced without moving focus (4.1.3).

Quiz. Each line is a real problem. Which POUR principle does it break? Choose one per line.

5. Levels: A, AA and AAA

Every success criterion has a level. Each level includes the one before it.

Level A — the bare minimum. Without it, some people cannot use the page at all. Example: images have alt text.

Level AA — the usual target. It adds things like colour contrast of at least 4.5 to 1 for normal text.

Level AAA — the strictest. Good to aim for in places. The W3C does not expect whole sites to meet all of it.

Many laws and public rules use WCAG AA as their yardstick. Examples include the ADA in the USA, Section 508 for US government sites, and the European Accessibility Act. The exact rules differ by country and change over time, so check what applies to your project.

Check

Your school portal "meets AA". Does it also meet level A? (Yes. AA includes everything in A.)

6. Why it matters

People. Around one in six people worldwide has a significant disability, says the WHO. Everyone has situational limits sometimes.
Law. In many countries, public sites and many shops must be accessible. Fixing problems early is cheaper than fixing them after a complaint.
Better for everyone. The curb-cut effect: dips in the pavement were made for wheelchairs, but people with suitcases and prams use them too. Captions, contrast and clear text work the same way.
Search engines. Headings, link text and alt text help search engines understand your page too.

Try it yourself

Name one feature on your phone that started as an accessibility feature and that you use. (Ideas: captions, dark mode, voice typing, larger text.)

Common mistakes

You think	Why it is wrong	Better idea
"Accessibility is only for blind people."	It covers hearing, movement, thinking, and situations too.	Design for all four POUR principles.
"It looks fine, so it works."	Screen readers read the accessibility tree, not the picture.	Use real HTML elements.
"We will add it at the end."	Late fixes mean rebuilding parts of the site.	Think about it from the first sketch.
"Our users do not have disabilities."	You cannot see disability in your analytics. And everyone has situational limits.	Assume some users do.
"We must reach AAA everywhere."	Some AAA rules cannot apply to every kind of content.	Target AA. Add AAA where you can.

Try it yourself

Open any shopping site. Put your mouse away. Can you add an item to the basket with only Tab, Enter and Space?
Turn on captions for one video today. Notice when they help you.
Zoom a web page to 200% with Ctrl/Cmd + +. Does anything break or get cut off?

Remember

Disability can be permanent, temporary or situational.
Assistive tech reads the accessibility tree that the browser builds from your HTML.
WCAG has four principles: Perceivable, Operable, Understandable, Robust.
Level AA is the usual target, and many laws point to it.
Fixes for disabled users usually help everyone (the curb-cut effect).