WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Visual Styling of Radio Buttons, Checkboxes

for

From: Graham Armfield
Date: Dec 1, 2016 12:11PM

I've seen an approach where the labels for real radio buttons or checkboxes
were pulled across to cover the actual inputs - done via CSS. You can then
style the label to look like a button or some other touchable object -
including indicating which elements have focus and which are checked.

This exploits the browser convention that clicking or touching on an
explicitly marked up label for a radio button or checkbox will toggle the
value of the input.

As the technique uses native controls, you don't need any ARIA at all
really.

I can provide further details and an example if required.

Regards
Graham Armfield



coolfields.co.uk <http://www.coolfields.co.uk/>;
M:07905 590026
T: 01483 856613
@coolfields <https://twitter.com/coolfields>