473,326 Members | 2,125 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

WAI Accessibility and Forms

I'm trying to validate the WAI Accessibility of my web page, and all is
good except for the form I have on it. I'm getting a flag that reads:
"Identify all non-hidden INPUT elements that do not have an explicit
LABEL association." I'm not very familiar with labels in forms, but I
plopped in the Label tags where I thought they should go, but I'm still
getting the form flagged. Where am I going wrong?

Below are the lines getting flagged, and beneath that the error
messages I received. Any input is appreciated.

-Fleemo
<LABEL for="Resources"><INPUT TYPE="RADIO" NAME="Option"
VALUE="Resources"></LABEL>Resources (ELRs)<BR>
<LABEL for="Assessments"><INPUT TYPE="RADIO" NAME="Option"
VALUE="Assessments"></LABEL>Assessments (ELARs)<BR>
<LABEL for="Links"><INPUT TYPE="RADIO" NAME="Option"
VALUE="Links"></LABEL>Links<BR>
<LABEL for="SearchTerm"><INPUT TYPE="TEXT" NAME="SearchTerm" SIZE="14"
ALT="Text Input Field"></LABEL><BR>

<INPUT TYPE="submit" VALUE="Submit"><BR>

</FORM>
********************************

Rule: 12.4.1 - Identify all non-hidden INPUT elements that do not have
an explicit LABEL association.

* Failure - INPUT Element, of Type RADIO, at Line: 129, Column: 25
in FORM Element at Line: 118, Column: 2
* Failure - INPUT Element, of Type RADIO, at Line: 130, Column: 27
in FORM Element at Line: 118, Column: 2
* Failure - INPUT Element, of Type RADIO, at Line: 131, Column: 21
in FORM Element at Line: 118, Column: 2
* Failure - INPUT Element, of Type TEXT, at Line: 135, Column: 26
in FORM Element at Line: 118, Column: 2

Jul 24 '05 #1
8 3250
Gazing into my crystal ball I observed fl******@comcast.net writing in
news:11**********************@z14g2000cwz.googlegr oups.com:
I'm trying to validate the WAI Accessibility of my web page, and all is
good except for the form I have on it. I'm getting a flag that reads:
"Identify all non-hidden INPUT elements that do not have an explicit
LABEL association." I'm not very familiar with labels in forms, but I
plopped in the Label tags where I thought they should go, but I'm still
getting the form flagged. Where am I going wrong?

Below are the lines getting flagged, and beneath that the error
messages I received. Any input is appreciated.

-Fleemo
<LABEL for="Resources"><INPUT TYPE="RADIO" NAME="Option"
VALUE="Resources"></LABEL>Resources (ELRs)<BR> <LABEL
for="Assessments"><INPUT TYPE="RADIO" NAME="Option"
VALUE="Assessments"></LABEL>Assessments (ELARs)<BR> <LABEL
for="Links"><INPUT TYPE="RADIO" NAME="Option"
VALUE="Links"></LABEL>Links<BR>
<LABEL for="SearchTerm"><INPUT TYPE="TEXT" NAME="SearchTerm"
SIZE="14"
ALT="Text Input Field"></LABEL><BR>

<INPUT TYPE="submit" VALUE="Submit"><BR>

</FORM>
********************************

Rule: 12.4.1 - Identify all non-hidden INPUT elements that do not have
an explicit LABEL association.

* Failure - INPUT Element, of Type RADIO, at Line: 129, Column: 25
in FORM Element at Line: 118, Column: 2
* Failure - INPUT Element, of Type RADIO, at Line: 130, Column: 27
in FORM Element at Line: 118, Column: 2
* Failure - INPUT Element, of Type RADIO, at Line: 131, Column: 21
in FORM Element at Line: 118, Column: 2
* Failure - INPUT Element, of Type TEXT, at Line: 135, Column: 26
in FORM Element at Line: 118, Column: 2


<label for="item">Item: </labe> <input type="text" id="item" ...>

The for attribute of the label element must reference an id attribute in
the input, select or textarea element. This is what I do for radios:

<label for="choice">Choice: <input type="radio" id="choice" name="choice"
value="y"> Yes <input type="radio" id="choice1" name="choice" value="n"> No
</label>

--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
Jul 24 '05 #2
Adrienne <ar********@sbcglobal.net> writes:
<label for="item">Item: </labe> <input type="text" id="item" ...>

The for attribute of the label element must reference an id attribute in
the input, select or textarea element. This is what I do for radios:

<label for="choice">Choice: <input type="radio" id="choice" name="choice"
value="y"> Yes <input type="radio" id="choice1" name="choice" value="n"> No
</label>


With the common behaviour of label with radio inputs (click on the
label to select the input), I'd recommend

Choice:
<input type="radio" id="choice" name="choice" value="y">
<label for="choice"> Yes </label>
<input type="radio" id="choice1" name="choice" value="n">
<label for="choice1"> No </label>

In your example I think clicking on the word 'No' would select the
'Yes' option in many browsers, which isn't ideal.

Although, actually, I don't generally like putting multiple radio
buttons on one line, since it can be unclear which label goes with
which (especially if you get a line break in a bad place) so I'd
probably do:

<fieldset><legend>Choice:</legend>
<div><input type="radio" id="choice" name="choice" value="y">
<label for="choice"> Yes </label></div>
<div><input type="radio" id="choice1" name="choice" value="n">
<label for="choice1"> No </label></div>
</fieldset>

--
Chris
Jul 24 '05 #3
fl******@comcast.net wrote:
<LABEL for="Resources"><INPUT TYPE="RADIO" NAME="Option"
VALUE="Resources"></LABEL>Resources (ELRs)<BR>
1. Your label is the words "Resources (ELRs)". So that goes inside
the <label> element. Putting the form control inside (as you have
done) is optional.

2. The for=... attribute is an IDREF. That means it refers explicitly
to another element - namely, that which is being labelled. That's the
INPUT. So the INPUT needs an id= attribute identifying it as the
target. What you have above is equivalent to <a href="no such page">.
Rule: 12.4.1 - Identify all non-hidden INPUT elements that do not have
an explicit LABEL association.

* Failure - INPUT Element, of Type RADIO, at Line: 129, Column: 25
in FORM Element at Line: 118, Column: 2


In this instance the report is right. But this is a heuristic report:
what it should be saying is "This is suspicious - check it out", not
"This is wrong - fix it". Use of words like "failure" tends to lead
to box-ticking exercises that can be pretty useless, or even harmful.

The dangling <label for ...>s are definitely an error. Unlike the
presentation of the <input> elements, it requires no human judgement
to tell you that. Yet your reporting tool appears to have omitted them.

--
Nick Kew
Jul 24 '05 #4
Tim
Adrienne <ar********@sbcglobal.net> writes:
<label for="item">Item: </labe> <input type="text" id="item" ...>

The for attribute of the label element must reference an id attribute in
the input, select or textarea element. This is what I do for radios:

<label for="choice">Choice: <input type="radio" id="choice" name="choice"
value="y"> Yes <input type="radio" id="choice1" name="choice" value="n"> No
</label>

Chris Morris <c.********@durham.ac.uk> posted:
With the common behaviour of label with radio inputs (click on the
label to select the input), I'd recommend

Choice:
<input type="radio" id="choice" name="choice" value="y">
<label for="choice"> Yes </label>
<input type="radio" id="choice1" name="choice" value="n">
<label for="choice1"> No </label>
Not *just* recommend, it *has* to be done that way (one label per input
element). Them's the rules, and browser behaviour will require it, too.
In your example I think clicking on the word 'No' would select the
'Yes' option in many browsers, which isn't ideal.
With some browsers, putting multiple input elements inside one label
element means that only one of the inputs can be selected, no matter how
you try (clicking on either button, or the label text, will only activate
the first button).
Although, actually, I don't generally like putting multiple radio
buttons on one line, since it can be unclear which label goes with
which (especially if you get a line break in a bad place) so I'd
probably do:

<fieldset><legend>Choice:</legend>
<div><input type="radio" id="choice" name="choice" value="y">
<label for="choice"> Yes </label></div>
<div><input type="radio" id="choice1" name="choice" value="n">
<label for="choice1"> No </label></div>
</fieldset>


I concur, although you can simplify the labeling somewhat. The id and for
attributes aren't needed when you nest the label around the input.

e.g. <label><input type="radio" name="choice" value="y"> Yes</label>

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please delete some files yourself.
Jul 24 '05 #5
On Fri, 6 May 2005, Tim wrote:
I concur, although you can simplify the labeling somewhat. The id and for
attributes aren't needed when you nest the label around the input.

e.g. <label><input type="radio" name="choice" value="y"> Yes</label>


Indeed, and it seems to me a much more logical way of using label.

But at least one accessibility checker then whines about the lack of
an id and for= attribute, and references some verbiage in the WAI
guidelines which could indeed be read that way.

I didn't see any harm in adding the pointless id and for= attribute to
the nested label to pacify the checker. Do you?

cheers
Jul 24 '05 #6
Alan J. Flavell wrote:
On Fri, 6 May 2005, Tim wrote:
e.g. <label><input type="radio" name="choice" value="y"> Yes</label>


I didn't see any harm in adding the pointless id and for= attribute to
the nested label to pacify the checker.


IIRC, WinIE doesn't recognize labels without the id and for= attributes.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 24 '05 #7
Thank you all for your help with this. That was a great crash course
in making forms more accessible.

-Fleemo

Jul 24 '05 #8
Tim
On Fri, 6 May 2005, Tim wrote:
e.g. <label><input type="radio" name="choice" value="y"> Yes</label>


Alan J. Flavell wrote:
I didn't see any harm in adding the pointless id and for= attribute to
the nested label to pacify the checker.

Other than the extra work involved, and the potential for more errors to
accidentally creep in... On a large/complex page that might be dicing to
much with death (depending on the competence of the authors/maintainers),
and possibly bloating the page.
kchayka <us****@c-net.us> posted:
IIRC, WinIE doesn't recognize labels without the id and for= attributes.


It does here, but it's a completely incompetent and unpredictable program.

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please delete some files yourself.
Jul 24 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
by: JAMESICUS | last post by:
Refer to ..... http://news.com.com/2100-1032-5063444.html James Pickering Pickering Pages http://www.jp29.org/
9
by: Barbara de Zoete | last post by:
I am getting more and more confused as to the meaning of the words 'accessibility' and 'usability' *in the context of the world wide web*. What do these two words mean? How do they differ from one...
5
by: Dave Henson | last post by:
Hi I am checking a site for accessibility and Dreamweaver suggests making sure that the menu is accessible via keyboard as well as mouse (i.e device-independent). A question has arisen which is...
19
by: lolo | last post by:
Hi, I know how validate a page for CSS or HTML, but I didn't found how validate my page for accessibility Thanx for your help
54
by: richard_quick_uk | last post by:
Hi, If anyone's got the time I'd really appreciate any feedback on the accessibility of this site: http://www.cata.co.uk/_index.a­sp
0
by: Veli-Pekka Tätilä | last post by:
Hi, My first post here. I've found some serious accessibility flaws in the Python 2.4 docs and wish they could be rectified over time. I'm very new to Python and initially contacted docs at python...
4
by: waltborders | last post by:
Hi, Because the blind are unable to use a mouse, keyboard navigation is key. A major difficulty is that not all windows forms controls are keyboard 'tab-able' or 'arrow-able' or have "tab...
3
by: Edward Diener | last post by:
According to the CLS specification, the accessibility of the methods for adding, removing, and raising an event must be identical. There appear to be a few problems with this: 1) According to...
8
by: cms-hispano.org | last post by:
i'm building a site about extreme accessibility, i.e.: how (and why) to get sites to become fully accessible, *beyond* W3C Web Accessibility Initiative guidelines. it's far from being completed (i...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.