WebAIM - Web Accessibility In Mind

E-mail List Archives

Radio Buttons Not Functioning

for

From: JP Jamous
Date: Jan 30, 2017 8:36AM

Folks,



I have various radio buttons that populate dynamically, which is not an
issue. However, if I go into forms mode, JAWS is unable to toggle between
the radio buttons using arrow keys.



1. Proper HTML semantic is being used.
2. Input fields have the same unique name.
3. No tabindex on any of the radio buttons, leaving the browser to
handle that.



The only thing that popped up at me was separate div tags. Here is how the
structure is in the DOM.



<div>

<input type="radio" id="radio1" name="offer" />

</div>

<div>

<label for="radio1">

1 year plan

</label>

</div>



<div>

<input type="radio" id="radio2" name="offer" />

</div>

<div>

<label for="radio2">

2 year plan

</label>

</div>





My assumption is that the div tags are causing JAWS not to be able to toggle
between the radio buttons via arrow keys. Although the input fields have the
same name attribute, the div is identifying to JAWS that this is a different
block of HTML. Therefore, the arrow key script is failing.



What are your thoughts?