WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Best practises with radio buttons

for

From: Graham Armfield
Date: Feb 25, 2016 4:21AM

Radio button groups always answer some kind of question. The tricky bit
about radio button labels is to get the question read out along with the
possible answers to provide the complete context. There are a number of
different ways to overcome this.


1. Use a <fieldset> with a <legend> to group the radio buttons. The
<legend> text contains the question, The radio button labels contain the
answers.
2. Stuff the question into the labels alongside the answer - use
'screen-reader-text' to hide the question portion of the label from sighted
users.
3. Wrap the question in a <span> with an id, and then use the
aria-describedby="question-id" attribute on the radio button inputs.
4. Use a <select> instead.


Number 3 will only work if you know that you're catering for browsers and
AT that support ARIA sufficiently. The other options are fairly
bullet-proof.

Regards
Graham Armfield


On Thu, Feb 25, 2016 at 4:12 AM, Sean Murphy < <EMAIL REMOVED> >
wrote:

> Hi all.
>
>
> What is the best practises with Radio buttons. The option for each item in
> the radio button should be spoken. But what about the title of the radio
> button? I assume this should be spoken. Am I correct?
>
> Sean
> > > > >