Robust
Concept
The fourth principle of the Web Content Accessibility Guidelines (WCAG): content has to reach people the same way across different browsers and assistive technologies.
Why it exists
The most common finding in an accessibility audit is a screen that looks fine and transmits nothing to a machine. The first three principles look at the human side. Perceivable keeps information from depending on one sense, operable keeps every function reachable without a mouse, and understandable keeps what happens predictable. Satisfy all three and the screen can still deliver nothing, because what the assistive software receives is a different thing from what the eye receives.
Pagedeck ran into exactly that. A select list Theo built by hand worked with a mouse and with a keyboard, and it passed contrast. Opened with a screen reader, though, the control wasn't announced as a list at all — it came through as plain text, with no count of options, so the user never learned a list was there.
There is also more than one browser and more than one assistive tool. Confirm it works in a single combination and the same screen reads differently in the next. This principle is about that delivery path rather than about how the screen looks.
How it works
The requirement fits in one line: every element's name, role and state has to be readable by software.
- Name. A machine needs something to read out for the element. A button holding only an icon makes sense to the eye but has no name, so it gets announced as just "button" — attach a name like delete or share.
- Role. Whether it's a button, a link, or a checkbox has to be recorded. A box merely styled to look like a button arrives as a box with no role at all. Use the standard element and the role comes with it.
- State. Whether something is open, selected, or currently unavailable has to travel. Rotating an arrow and changing a color leaves the information visible only to the eye; open and closed have to be written in the code to be spoken.
- Announce what changed. When a save fails and a red message appears without being announced, someone using a screen reader carries on believing nothing happened.
Hand-built components are where this breaks most often. Standard elements arrive with all three properties already in place, while a custom one leaves every property to be filled in by hand — which makes reaching for the standard element the cheapest way to satisfy the principle.
How it sounds at work
"That's a button made out of a plain box, isn't it? It fails the Robust principle."
The shape reads as a button to people and as nothing to machines.
"The role is set but the state doesn't update. It's open and reads as closed."
Missing any one of the three is enough to fail.
"Let's not hand-build this. The native element is faster."
Standard elements bring name, role and state along with them.
Pagedeck runs every new component past a screen reader once. The check is to close your eyes and operate it with the keyboard only. Theo replaced that select list with a standard element, and now looks for a standard element before building anything new.
Where to go next
- WCAG
see where this sits among the four principles
- Perceivable
the first principle, covering the human side
Last updated 2026-09-16