E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: Sean Murphy
Date: Wed, Feb 24 2016 9:12PM
Subject: Best practises with radio buttons
No previous message | Next message →

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

From: Léonie Watson
Date: Thu, Feb 25 2016 3:14AM
Subject: Re: Best practises with radio buttons
← Previous message | Next message →

> From: WebAIM-Forum On Behalf Of Sean Murphy
> Sent: 25 February 2016 04:13
>
> 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?

Using the title attribute on a radio button isn't a good idea. It provides an accessible name (the thing announced by screen readers) for the radio button, that will compete with the accessible name provided by the <label>.

Although the title attribute can be used to provide the accessible name for a form field in certain limited circumstances, a set of radio buttons isn't generally one of them. It's better to use the <label> element to provide the accessible name for each radio button and a visible label at the same time.

Léonie.


--
@LeonieWatson tink.uk Carpe diem

From: Graham Armfield
Date: Thu, Feb 25 2016 4:21AM
Subject: Re: Best practises with radio buttons
← Previous message | Next message →

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 ADDRESS 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
> > > > >

From: Birkir R. Gunnarsson
Date: Thu, Feb 25 2016 5:31AM
Subject: Re: Best practises with radio buttons
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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.

From: Graham Armfield
Date: Thu, Feb 25 2016 8:12AM
Subject: Re: Best practises with radio buttons
← Previous message | Next message →

On Thu, Feb 25, 2016 at 12:31 PM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

>
>
> 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
>
>
​I've had recent experience where that approach can be problematical. I did
some work with a client that had an insurance quotation journey. There were
many yes/no radio button groups in a row, and they initially had the
question associated with the label for the first of the pair (Yes). That
worked OK for initial filling in when people usually proceed down the form.

However, having selected No to some questions, and then reviewing the form
inputs before submission, or reviewing due to validation errors resulted in
just the 'No' answer being read out without the context.​

Perhaps a fieldset and legend would be the best solution where verbose
announcing was considered a risk?

Regards
Graham Armfield

From: Sailesh Panchang
Date: Thu, Feb 25 2016 2:35PM
Subject: Re: Best practises with radio buttons
← Previous message | No next message

Technique #6 or 7 might be helpful:
http://www.deque.com/blog/techniques-labeling-standard-html-form-controls/

Thanks,
Sailesh Panchang
On 2/25/16, Graham Armfield < = EMAIL ADDRESS REMOVED = > wrote:
> On Thu, Feb 25, 2016 at 12:31 PM, Birkir R. Gunnarsson <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>>
>>
>> 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
>>
>>
> ​I've had recent experience where that approach can be problematical. I did
> some work with a client that had an insurance quotation journey. There were
> many yes/no radio button groups in a row, and they initially had the
> question associated with the label for the first of the pair (Yes). That
> worked OK for initial filling in when people usually proceed down the form.
>
> However, having selected No to some questions, and then reviewing the form
> inputs before submission, or reviewing due to validation errors resulted in
> just the 'No' answer being read out without the context.​
>
> Perhaps a fieldset and legend would be the best solution where verbose
> announcing was considered a risk?
>
> Regards
> Graham Armfield
> > > > >