WCAG explained
One success criterion at a time, in plain language. What the rule says, why it matters to real visitors, the mistakes we keep finding in audits, and how to test it yourself.
ARIA roles and attributes: when you need them and when you do not
ARIA is the one technology in web accessibility that lets you make a page actively worse than it was without it. A wrong role tells assistive software something untrue, and the user acts on it.
SC 1.3.2 - What does "Meaningful Sequence" mean?
You take in a page at a glance. The heading is big and at the top, the date sits underneath in small type, the photo is beside it. Your brain assembles the relationships without being asked.
SC 1.3.3 - What does "Sensory Characteristics" mean?
“Click the green button on the right.” “Fill in the red fields.” “Press the three dots at the top.”
SC 1.3.5 - What does "Identify Input Purpose" mean?
You are filling in yet another contact form. Name, email, phone, address. Your browser has known all of this for years and the form will not let it help. So you type it all again.
SC 1.4.1 - What does "Use of Colour" mean?
An input that turns red when something is wrong. A green dot for available and a red one for taken. Links that differ from the surrounding text by colour alone.
SC 1.4.10 - What does "Reflow" mean?
Someone with reduced vision zooms to 400%. On a page that does not adapt, reading now means scrolling right, then back left, then right again, once per line. Everybody gives up after two paragraphs. WCAG says: content has to fit the screen without scrolling in two directions.
SC 1.4.11 - What does "Non-text Contrast" mean?
You are standing outside a museum in bright sun, trying to buy a ticket on your phone. The form is there somewhere. The input fields have a pale grey outline you cannot make out, and the button blends into the background. You tilt the screen, cup your hand over it, give up, and join the queue at the desk.
SC 1.4.12 - What does "Text Spacing" mean?
You built the hero exactly as designed. Height 400 pixels, text centred, pixel perfect. Then a reader with dyslexia turns line height up to 1.5, and the last line of your heading is simply gone.
SC 1.4.4 - What does "Resize Text" mean?
Somebody finds your text too small and presses Ctrl and plus. The letters get bigger, and then it goes wrong: the last line of every card is gone, button labels sit on top of each other, and the menu will not open.
SC 2.1.1 - What does "Keyboard" mean?
Put your mouse in a drawer and try to use your own website. Order something, submit the contact form, open the menu, close the cookie banner. Most teams get about a minute in before something stops working.
SC 2.2.2 - What does "Pause, Stop, Hide" mean?
A carousel cycling through slides on its own. A news ticker sliding along the bottom. A background animation that never settles. To you it is a dynamic design element. To someone with ADHD, a concentration disorder or a vestibular condition it can make the rest of the page unreadable.
SC 2.4.2 - What does "Page Titled" mean?
You have twelve tabs open and you are looking for the one with your basket in it. Three are called “Home”, two say “Welcome”, and the rest show only the company name. You click through them one by one.