E-mail List Archives
Thread: form accessibility
Number of posts in this thread: 26 (In chronological order)
From: Angela French
Date: Wed, Aug 10 2016 12:38PM
Subject: form accessibility
No previous message | Next message →
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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;
From: Jim Homme
Date: Wed, Aug 10 2016 12:46PM
Subject: Re: form accessibility
← Previous message | Next message →
Hi Angela,
I'd get rid of the title attributes. They clutter up the verbal space. I will look further when I can.
Jim
=========Jim Homme,
Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O
From: Jamous, JP
Date: Wed, Aug 10 2016 1:00PM
Subject: Re: form accessibility
← Previous message | Next message →
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.
From: Angela French
Date: Wed, Aug 10 2016 2:20PM
Subject: Re: form accessibility
← Previous message | Next message →
Thank you. I will have to take this up with our CMS support as this is what it "spits" out.
From: Jim Homme
Date: Wed, Aug 10 2016 2:24PM
Subject: Re: form accessibility
← Previous message | Next message →
Hi Angela,
No problem. If you are sighted, you might want to use NVDA silently with the Speech Viewer parked in a corner of the screen and hit the letter f to cycle through form fields forward and Shift+F to go backward, and see that there's a bunch of double-verbalization.
Thanks.
Jim
=========Jim Homme,
Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O
From: Angela French
Date: Wed, Aug 10 2016 2:27PM
Subject: Re: form accessibility
← Previous message | Next message →
I found where the .xsl is creating the html, so I'm going to attempt to edit it myself. Once I fix the id/for attributes would you mind retesting?
Angela French
From: Jamous, JP
Date: Wed, Aug 10 2016 2:29PM
Subject: Re: form accessibility
← Previous message | Next message →
Do it and I'll test it from home.
I have been working since 5:00 A.M. I need a beer.
From: Angela French
Date: Wed, Aug 10 2016 2:41PM
Subject: Re: form accessibility
← Previous message | Next message →
It isn't necessary to have either the "name" or "title" attribute, correct? Should id and for suffice?
From: Angela French
Date: Wed, Aug 10 2016 2:48PM
Subject: Re: form accessibility
← Previous message | Next message →
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
From: Moore,Michael (Accessibility) (HHSC)
Date: Wed, Aug 10 2016 2:48PM
Subject: Re: form accessibility
← Previous message | Next message →
The value of the name attribute is sent to the server as part of a name/value pair for data processing. Thus if you have <input type="text" name="firstName" ... /> and the user enters "Mike" and hits submit. firstname Mike will get sent to the server. The name attribute has nothing to do with accessibility for AT.
The value of the title attribute will be reported by the screen reader as the accessible name of the field if no other label is specified through the label element or by using aria. Depending on user settings it may be read in addition to another specified accessible name.
Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
From: Preast, Vanessa
Date: Wed, Aug 10 2016 2:51PM
Subject: Re: form accessibility
← Previous message | Next message →
Interesting. I tried NVDA with IE and it sounded OK. NVDA with Firefox resulted in stuff like: "reasonforvisit Looking for community or technical college information check box not checked reasonforvisit"
From: Jamous, JP
Date: Wed, Aug 10 2016 3:09PM
Subject: Re: form accessibility
← Previous message | Next message →
Name is necessary and all ratio buttons should have the same name. Otherwise, the screen reader cannot rotate through the group of radio buttons.
As far as the title, take it out for sure.
From: Jim Homme
Date: Wed, Aug 10 2016 3:13PM
Subject: Re: form accessibility
← Previous message | Next message →
Hi,
You definitely need the id attribute. For the label tag, you need the for attribute. Let me advise you to make the id attribute and as soon as you make it, get the value from the quotes, and make the for attribute, then paste the value. HTML wants them to be exactly the same, including case. And make sure that the id's are unique. Regarding the name attribute, you need it if scripting refers to it.
Thanks.
Jim
=========Jim Homme,
Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O
From: Jim Homme
Date: Wed, Aug 10 2016 3:16PM
Subject: Re: form accessibility
← Previous message | Next message →
Hi,
My bad. Please do what Jamous said with the radio buttons. Also, if possible, put fieldset and legend around them each group.
Jim
=========Jim Homme,
Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O
From: Jamous, JP
Date: Wed, Aug 10 2016 3:29PM
Subject: Re: form accessibility
← Previous message | Next message →
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.
From: Jamous, JP
Date: Wed, Aug 10 2016 3:51PM
Subject: Re: form accessibility
← Previous message | Next message →
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.
From: Angela French
Date: Wed, Aug 10 2016 4:55PM
Subject: Re: form accessibility
← Previous message | Next message →
I have fieldset and legend around each group but moved the legend off the visual field. Are they not perceivable by screen readers?
From: Angela French
Date: Wed, Aug 10 2016 5:33PM
Subject: Re: form accessibility
← Previous message | Next message →
In my .xsl, if I put the <input> before the <label> (on radio buttons and checkboxes), I think I can grab the value of the radio button and use it as my for and id attribute. But if the <label> comes first, I can't. Is there a preferred order by screen reader users? I like the idea of the label first, so that sighted users can click anywhere and don't have to aim for the little radio button or checkbox
Angela French
From: Jonathan Avila
Date: Wed, Aug 10 2016 5:39PM
Subject: Re: form accessibility
← Previous message | Next message →
> In my .xsl, if I put the <input> before the <label> (on radio buttons and checkboxes), I think I can grab the value of the radio button and use it as my for and id attribute. But if the <label> comes first, I can't. Is there a preferred order by screen
The input should come before the label for radio button and checkboxes. Screen magnifiers are designed to work this way and may align the left edge of the magnified view as this paradigm is advised for checkboxes and radio buttons.
https://www.w3.org/TR/WCAG20-TECHS/G162.html
Jonathan
Jonathan Avila
Chief Accessibility Officer
SSB BART GroupÂ
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)
Visit us online: Website | Twitter | Facebook | Linkedin | Blog
Check out our Digital Accessibility Webinars!
From: Jim Homme
Date: Wed, Aug 10 2016 5:39PM
Subject: Re: form accessibility
← Previous message | Next message →
Hi Angela,
I didn't view source, so if you have fieldset and legend, my bad.
Thanks.
Jim
=========Jim Homme,
Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O
From: Jamous, JP
Date: Wed, Aug 10 2016 5:40PM
Subject: Re: form accessibility
← Previous message | Next message →
If you use the "FOR" attribute, you can put the label wherever you want. It can be at the end of the DOM who cares. The screen reader links the input and label through the ID.
As to using the value in the input tag, I don't understand what you mean. Use the Value to find out which radio button is selected. Do not use it to reference anything.
From: Jim Homme
Date: Wed, Aug 10 2016 5:46PM
Subject: Re: form accessibility
← Previous message | Next message →
Hi,
The convention, if you separate the labels from the check boxes or radio buttons is to put the label tag after the control in the HTML order. If you're unable to do this, I would put the label tag in there and the input tag inside. If you choose to do it that way, it's still a good idea to put the actual label text after, as in right before the closing label syntax. And if you choose to put the input tag in the label tag, you don't have to do for and id. They are implied. Just remember, though, that if you separate them later, you have to put them back in. It's probably overkill, but I'd use them, so I wouldn't have to remember to include them.
Thanks.
Jim
=========Jim Homme,
Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O
From: Joe Chidzik
Date: Thu, Aug 11 2016 7:19AM
Subject: Re: form accessibility
← Previous message | Next message →
> If you use the "FOR" attribute, you can put the label wherever you want. It
> can be at the end of the DOM who cares.
Well, label positioning is still important visuallysemantically - so please don't put it at the end of the DOM.
Yes, using forid means the label is explicitly associated with the input field. Sighted users still benefit from having it visually adjacent though, and screenreader users not in forms mode, just arrowing down the page, will also benefit from having the label positioned adjacent in the DOM too as they will hear the label > input field in the correct order.
Joe
From: Jamous, JP
Date: Thu, Aug 11 2016 7:25AM
Subject: Re: form accessibility
← Previous message | Next message →
Joe is right Angela. I was referring to the relationship markup wise.
However, it is important for sighted users and screen readers that are down-arrowing through your form as Joe explained.
From: _mallory
Date: Thu, Aug 11 2016 1:57PM
Subject: Re: form accessibility
← Previous message | Next message →
On Wed, Aug 10, 2016 at 08:48:19PM +0000, Angela French wrote:
> 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?
>
They don't have to wrap to get that benefit. You'll also get it when you
use the input's id and the label's for attribute linking to each other
as well.
So, both methods should allow clicking on the label to focus on the input :)
_mallory
From: Angela French
Date: Thu, Aug 11 2016 3:25PM
Subject: Re: form accessibility
← Previous message | No next message
I've been working on the .xsl that generates the html output for my survey. I believe I've gotten the for/id issue fixed up. I'd appreciate it if anyone could take another look and suggest other improvements.
http://www.dev.sbctc.edu/_testing/site-satisfaction-survey-2.aspx
Angela