Accessibility and WCAG

Learn the basics of making a site easier for everyone to use.

Big Picture

One small picture can make this idea easier to hold.

Accessible page

• Clear labels on forms.
• Good color contrast.
• Keyboard works for all actions.
• Images have helpful alt text.

Hard page

• Blank buttons with no labels.
• Light gray text on white.
• Mouse-only controls.
• Images with no meaning.

VerdictAccessible pages are easier for more people and easier to test.

How It Moves

Short steps make the flow easier to see.

1

Check labels

Make sure buttons and inputs have names.

2

Check color

See if text stands out from the background.

Check keyboard

Move through the page without a mouse.

4

Check images

See if important images have alt text.

Step By Step

This is the same idea, stretched across time.

1. 1

   Scan the page

   Look for the main inputs, buttons, and images.

2. 2

   Try keyboard use

   Tab through the page and watch focus.

3. 3

   Check text and color

   Make sure content is easy to read.

4. 4

   Note the gaps

   List the parts that block use or slow people down.

One Small Model

Think of this like a tiny card you can keep in your pocket.

Accessible button

5 fields

Text:"Save"

Role:"button"

Focus:"Visible"

Contrast:"Good"

Label:"Clear"

Quick Check

Question 1 of 10 correct

Why is alt text useful?

A screen reader can read the image meaningIt makes the image load fasterIt changes the image colorIt is only for design teams

HintSubmit

Map It

One more picture helps you see where this lesson matters most.

Access impact map

Fix effort

Hard

Quick win

Add a missing label

Big win

Fix keyboard flow

Low value

Tiny color tweak

Plan later

Deep layout change

Easy

SmallLarge

User impact

Final Quiz

Question 1 of 30 correct

What is the best reason to test keyboard use?

Some people use only the keyboardIt makes the site colorfulIt removes all bugsIt is only for forms

HintSubmit