Forms elements! They’re a pain to style, aren’t they? It’s tempting to replace them altogether, with some custom markup and CSS of our own design. The trouble is, the resultant rat’s nest of[code language="html"]
spans will lack the semantic and behavioral qualities that made the standard
This is just a lonely piece of text that says “accessibility?” Tragic, really. To make this even begin to work correctly again, we need to add all sorts of remedial WAI-ARIA semantics. In the immortal words of Iron Maiden, “can I play with madness?”[code language="html"]aria-labelledby="accessible-radio" role="checkbox" aria-checked="false">
Our example is still one hundred percent inaccessible because we have yet to cludge all of the conventional behaviors and key bindings established by the standard
type="radio". This will require the
What I have done is available as a CodePen demo, and to follow is an explanation of the technique.
Use what’s already there
To think accessibly, you need to consider the HTML the interface and the CSS merely the appearance of that interface; the branding. Accordingly, we need to look for ways to seize control of UI aesthetics without relying on the recreation of the underlying markup that marks a departure from standards.
What do we know about radio buttons?
One thing we know about radio buttons is that they can be in either a checked or unchecked state. Never mind ARIA, this is just HTML’s[code language="html"]
Fortuitously, we can express the checked state via the
:checkedpseudo-class in CSS: