WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: form accessibility

for

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

Angela,

1. The name is JP. Jamous makes me feel old. LOL
2. Yes you can with the check box. I tested it to be certain. However, put the text before the Input element. Remember screen readers love sequential execution.

<label>
I'm Number 1
<input type="checkbox" />
</label>
<label>
I'm Number 2
<input type="checkbox" />
</label>
<label>
I'm Number 3
<input type="checkbox" />
</label>
<label>
I'm Number 4
<input type="checkbox" />

</label>

The only thing I don't mind if you use is role="checkbox". This insures that the screen reader sees it as a check box.

Do not add any unnecessary attributes. The more you add the more complicated you make your life.
-----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/>;