E-mail List Archives

Search E-mail List Archives for

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

From: Jamous, JP
Date: Mon, Aug 01 2016 11:20AM
Subject: Separating various radio buttons
No previous message | Next message →

Folks,

I used to use ASP.NET radio button list back when I used to program. I never had to worry about having multiple lists on one page. The question is how can I create various lists using just HTML?

For example,
Do you like Dogs?
Radio Button Yes
Radio Button No

Do you like Cat?
Radio Button Yes
Radio Button No.

I am assuming that if I use a div for each that should tell the screen reader that the first 2 are for dogs and the second 2 are for cats. Right?




**************************************************

Jean-Pierre Jamous
Web Accessibility Specialist & Developer
UI Accessibility Team


The only limitations in life are those we set for ourselves

**************************************************

From: Lovely, Brian (CONT)
Date: Mon, Aug 01 2016 11:27AM
Subject: Re: Separating various radio buttons
← Previous message | Next message →

There are a number of things you can do. One is to wrap each group in a fieldset element, and make sure that the "Do you like..." is in a legend element inside the fieldset. Another is to group the associated radio buttons by giving each button the same name, like "cat_choice".

From: Marc Solomon
Date: Mon, Aug 01 2016 11:44AM
Subject: Re: Separating various radio buttons
← Previous message | Next message →

I am thinking that HTML <fieldset> and <legend> should do the trick. Leonie Watson just posted a very nice article on this topic: https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/.
Best,
Marc

From: Jamous, JP
Date: Mon, Aug 01 2016 11:51AM
Subject: Re: Separating various radio buttons
← Previous message | Next message →

Thank you guys. That was exactly what I was looking for.

Greatly appreciate it.

From: Jamous, JP
Date: Mon, Aug 01 2016 12:11PM
Subject: Re: Separating various radio buttons
← Previous message | Next message →

Marc,

I used this code, but I am unable to use the arrow keys to switch from one radio button to another in forms mode on. I can tab through them. What would make the arrow keys toggle through them though?

<form>
<fieldset>
<legend>
Overall, how would you rate the experience you received during your contact with our representative today?
</legend>

<input type="radio" id="VeryGood">
<label for="VeryGood">
Very Good
</label>

<input type="radio" id="Good">
<label for="Good">
Good
</label>
</fieldset>
</form>

From: Moore,Michael (Accessibility) (HHSC)
Date: Mon, Aug 01 2016 12:20PM
Subject: Re: Separating various radio buttons
← Previous message | Next message →

You just need to give them the same name.

<form>
<fieldset>
<legend>
Overall, how would you rate the experience you received during your contact with our representative today?
</legend>

<input type="radio" id="VeryGood" name="g1">
<label for="VeryGood">
Very Good
</label>

<input type="radio" id="Good" name="g1">
<label for="Good">
Good
</label>
</fieldset>
</form>

Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)

From: Birkir R. Gunnarsson
Date: Mon, Aug 01 2016 12:20PM
Subject: Re: Separating various radio buttons
← Previous message | Next message →

You guys are missing the common name attribute.
All radiobuttons in the same group (fieldset) have to have the same
name attribute. This enables the browser to let users navigate between
and select them with the arrow keys.
<input id="r11" name="r1">
<input id="r12" name="r1">
<input id="r13" name="r1">
for radiobuttons in group 2, the name would be r2 and so on.
If you want to create custom attributes using JavaScript and ARIA you
need to use ARIA radiogroup element with aria-labelledby, radio roles,
and use JavaScript to control the navigation between individual
simulated radiobuttons with the arrow keys.
I have a blog on providing group labels for radiobuttons:
http://a11yideas.com/testcode/makeGroupAccessible.html

I have been working on a blog on creating custom rdiobutton groups
from divs and spans (in general, never a recommended practice unless
the html just cannot be used to Cheers
-B



On 8/1/16, Jamous, JP < = EMAIL ADDRESS REMOVED = > wrote:
> Marc,
>
> I used this code, but I am unable to use the arrow keys to switch from one
> radio button to another in forms mode on. I can tab through them. What would
> make the arrow keys toggle through them though?
>
> <form>
> <fieldset>
> <legend>
> Overall, how would you rate the experience you received during your contact
> with our representative today?
> </legend>
>
> <input type="radio" id="VeryGood">
> <label for="VeryGood">
> Very Good
> </label>
>
> <input type="radio" id="Good">
> <label for="Good">
> Good
> </label>
> </fieldset>
> </form>
>

From: Marc Solomon
Date: Mon, Aug 01 2016 12:21PM
Subject: Re: Separating various radio buttons
← Previous message | Next message →

Try adding a matching name and unique value attribute to each radio input. For example:

<form>
<fieldset>
<legend>
Overall, how would you rate the experience you received during your contact with our representative today?
</legend>

<input type="radio" id="VeryGood" name="rating" value="VeryGood">
<label for="VeryGood">
Very Good
</label>

<input type="radio" id="Good" name="rating" value="Good"">
<label for="Good">
Good
</label>
</fieldset>
</form>

Best,
Marc

From: Ryan E. Benson
Date: Mon, Aug 01 2016 12:23PM
Subject: Re: Separating various radio buttons
← Previous message | Next message →

Also, have a read through of http://webaim.org/techniques/forms/controls

Ryan E. Benson

On Aug 1, 2016 14:11, "Jamous, JP" < = EMAIL ADDRESS REMOVED = > wrote:

> Marc,
>
> I used this code, but I am unable to use the arrow keys to switch from one
> radio button to another in forms mode on. I can tab through them. What
> would make the arrow keys toggle through them though?
>
> <form>
> <fieldset>
> <legend>
> Overall, how would you rate the experience you received during your
> contact with our representative today?
> </legend>
>
> <input type="radio" id="VeryGood">
> <label for="VeryGood">
> Very Good
> </label>
>
> <input type="radio" id="Good">
> <label for="Good">
> Good
> </label>
> </fieldset>
> </form>
>

From: Jamous, JP
Date: Mon, Aug 01 2016 12:37PM
Subject: Re: Separating various radio buttons
← Previous message | No next message

Thank you all.