Free tools · Checker
ARIA validator
ARIA is where most 4.1.2 failures come from, and nearly always the same way: a role declared and the thing it requires left out. Of the 94 roles, 34 oblige you to supply a state, a particular parent, or particular children.
A component, a widget, or a whole page. Nothing leaves your browser.
Everything above is checked against the 94 roles and 48 states and properties in the ARIA model, which means it is checking that your markup is valid rather than that it is true. Those are different questions, and the gap between them is where most ARIA goes wrong. A tablist described perfectly here still fails the first person who presses an arrow key on it, because behavior is not in the markup. It is worth knowing what a finding here is not, as well. W3C's own test rules for ARIA validity treat 4.1.2 Name, Role, Value as a secondary requirement rather than the thing they test, and one of them says in terms that it is not required for conformance at any level. So invalid ARIA is worth fixing on its own merits, and it does not by itself mean you have failed a success criterion. Names run the same way. This tool reads none, and no published test rule checks whether a name is any good rather than merely present, so a button named “button” clears every one of them.
What it checks
Whether the role exists, and whether you may use it
Misspelled roles are ignored silently, so the element keeps whatever meaning its tag had. The twelve abstract roles are the trap, because they are real names in the specification that no browser implements. An element carrying one falls back to its tag's own semantics, exactly as a misspelled role does, which is why neither one announces what you meant.
Whether the role got what it requires
A checkbox without aria-checked, a combobox without aria-expanded, a heading without aria-level. The role announces and then says nothing about its state, which is more confusing than an undescribed div.
Whether it sits and contains what it must
A tab outside a tablist is orphaned. A tablist with no tabs describes a structure that is not there. Fourteen roles need a particular parent and thirteen must contain particular children.
Whether each attribute belongs where you put it
Checked against the 48 states and properties and the roles each is defined for, plus the two that are deprecated and do nothing.
What it cannot tell you
- It reads markup, not behavior. A tablist described perfectly that ignores arrow keys passes here and fails the moment somebody uses it.
- A required parent may be in markup you did not paste, so that one is reported as worth checking rather than as broken.
- It says nothing about accessible names. Whether an element has one, and whether the one it has is any good, is outside what this reads.
- It reports role="separator" without aria-valuenow as broken. The specification asks for that value only on a focusable separator, so an ordinary divider is flagged here without being wrong.
Where to go next
- Every ARIA roleWhat each one obliges you to supply, and the twelve you must never use.
- States and propertiesWhich roles each attribute belongs to, and which change as someone uses the control.
- ARIA explainedStart here if the result raised more questions than it answered.
- How ARIA gets testedThe W3C's own test rules, which is what an automated checker runs.