WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: form accessibility

for

From: Jamous, JP
Date: Aug 10, 2016 3:51PM

Angela,

Here is the result. NVDA does not care how you code the radio buttons below, but JAWS does.

The first Div, presents its radio buttons to JAWS without captions when arrowing through them. The user would have to get out of forms mode, read the text on the screen and press enter on the radio button close to the text.

JAWS here reads "Radio Button" if arrowing through it. NVDA speaks the label when arrowing through the list.
<div>
<label>
I'm Number 1
<input type="radio" name="Test1" />
</label>
<label>
I'm Number 2
<input type="radio" name="Test1" />
</label>
<label>
I'm Number 3
<input type="radio" name="Test1" />
</label>
<label>
I'm Number 4
<input type="radio" name="Test1" />
</label>
</div>

Here both JAWS and NVDA read the caption of each radio button when arrowing through the list. NVDA does the same. So to be on the safe side, use the FOR attribute to link the label to its associated radio button.
<div>
<label for="Number1">
I'm Number 1
</label>
<input type="radio" id="Number1" name="Test2" />
<label for="Number2">
I'm Number 2
</label>
<input type="radio" id="Number2" name="Test2" />
<label for="Number3">
I'm Number 3
</label>
<input type="radio" id="Number3" name="Test2" />
<label for="Number4">
I'm Number 4
</label>
<input type="radio" id="Number4" name="Test2" />
</div>

Now you have a better understanding of how it works. I'd use the "FOR" attribute in all cases to be on the safe side.