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.
-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Angela French
Sent: Wednesday, August 10, 2016 3:48 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] form accessibility

Jamous,
Doesn't the <label> wrapped around the <input type="checkbox"> help usability to allow the user to click on the label to actually check the box, so they don't have to aim just for the tiny checkbox?

Angela

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Jamous, JP
Sent: Wednesday, August 10, 2016 12:01 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] form accessibility

Angela,

It is a mess for JAWS 17. JAWS 17 keeps reading what is in the name="".

Give your radio button an ID and use for="RadioButtonID". Inside that label put what you want the caption to be for the radio button.

The way you have the labels wrapped around the check boxes and radio buttons are causing major accessibility issues. I can only tell what the radio button or check box is by down-arrowing through the form.
-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Angela French
Sent: Wednesday, August 10, 2016 1:38 PM
To: WebAim Forum ( <EMAIL REMOVED> ) < <EMAIL REMOVED> >
Subject: [WebAIM] form accessibility

I have created a from using a form building tool in the CMS that we use. I'm not convinced the end results are accessible, though achecker.ca did not throw an error on my radio buttons and checkboxes.

Doesn't there need to be matching "for" and "id" attributes in the <label> and the <input>? Otherwise how does the screen reader users know which labels go with which radio buttons/checkboxes?

Here is my test form.

http://www.dev.sbctc.edu/_testing/site-satisfaction-survey-2.aspx

Thank you for any advice on how to make this form more accessible. I am aware of the error thrown on the hidden field for bots. Am working on that.


Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
<EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
www.sbctc.edu<;http://www.sbctc.edu/>;