WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Best practises with radio buttons

for

From: Birkir R. Gunnarsson
Date: Feb 25, 2016 5:31AM

I wrote an article about this a while back, never got around to
publishing it though.
You may find it helpful:
http://a11yideas.com/testcode/makeGroupAccessible.html
The better ARIA approach to assigning the common label to radio
buttons is wrapping the radiobuttons and their labels in a div with a
group role attribute, and use aria-labelledby attribute on that
element to point to the ID of the common label element (article
explains this in more details).

But embedding the question in the label or using aria-describedby works too.
If you are using those techniques I would strongly advice to only do
that on the first radiobutton in each group (or the radiobutton that
receives focus when user tabs into the group).
Associating the question with every single radiobutton in the set
makes the screen reader experience so verbose as to be distracting.
Cheers



On 2/25/16, Graham Armfield < <EMAIL REMOVED> > wrote:
> 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
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.