WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Separating various radio buttons

for

From: Birkir R. Gunnarsson
Date: Aug 1, 2016 12:20PM

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