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 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
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 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
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.
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
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.
Thank you all for your help with this. That was a great crash course
in making forms more accessible.
-Fleemo
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. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: JAMESICUS |
last post by:
Refer to .....
http://news.com.com/2100-1032-5063444.html
James Pickering
Pickering Pages
http://www.jp29.org/
|
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...
|
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...
|
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
|
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.asp
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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)...
|
by: Defcon1945 |
last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
|
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....
|
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
|
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...
|
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...
| |