WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Forms

for

From: Terence de Giere
Date: Nov 21, 2002 8:18PM


Leesa ---


Although not required for Section 508 Compliance and/or WAI Priority 1
compliance, I would first try to clean up the HTML a bit. There are a
number of HTML elements used in non standard nestings; this might be one
source of the problem. ID values must begin with a letter, not a number
and this might break the explicit association of LABELS using the ID
value with their associated INPUT elements because it is not allowed in
HTML specifications. Some accessibility checkers will also generate
errors on this point.

There are enough of these little glitches that it might even overload
the error correction routines in Internet Explorer, the most likely
browser for use with a screen reader, although I do not know exactly
what kind of HTML Internet Explorer expects. Such nesting errors can
cause unexpected display or rendering problems in browsers.

Some technology (such as a UNIX computer) may not understand the Windows
character set used for the page although I saw nothing in the form that
this would make a difference here.

For usability I would also make the structure more consistent. You
started with form elements in a TABLE, then switched to FIELDSET later
on, although this is not actually illegal.The unusual nestings may be
the problem here. If you really need to have the TABLE for format you
can place a TABLE inside a FIELDSET. In a TABLE there are restrictions
on what elements may be placed where. Form elements and headings and
paragraphs must either be entirely outside of the TABLE or inside a TD
element for a format only table.

The only HTML elements that can be place around LEGEND are FORM and FIELDSET

Paragraphs and headings are not allowed inside CAPTION or LABEL. Use CSS
to add format to these elements. You could also use B or the deprecated
FONT element (less prefereble to CSS). Be careful with FORMS and TABLES
together, if the TABLE is for format only, do not a caption, although
you may use a summary, although some users may find this annoying. Use a
heading before the table instead if you need a heading.

Be careful how you quote attributes. The safest and most robust method
is to have double quotes surrounding all attribute values. In one
instance, there was a quote left out on one side of an attribute which
could throw off the rendering.

For radio buttons, the name attribute must be the same for a group of
related radio buttons, but the ID value must be unique for every
element. The W3C recommends name and ID always be the same, but this
scenario does not work for radio buttons.

I put your form code in an HTML 4.01 page and parsed the file with the
W3C HTML validator ( http://validator.w3.org/ or
http://validator.w3.org/file-upload.html ) resulting in the following
report (I am not sure how this will format on the forum if the lines
rewrap):

* Line 13, column 17:

<Caption> <h2>This form is used to gather information about the St ...
^

Error: element "H2" not allowed here; possible cause is an inline element containing a block-level element
* Line 36, column 35:

... t type="text" id="title" tabindex=3" size="30" value="Job T ...
^

Error: an attribute specification must start with a name or name token
* Line 64, column 5:

<h3><legend> Information on your web design work.</legend></h3>
^

Error: element "H3" not allowed here; check which elements this element may be contained within
* Line 64, column 13:

<h3><legend> Information on your web design work.</legend></h3>
^

Error: element "LEGEND" not allowed here; check which elements this element may be contained within
* Line 65, column 5:

<h4> What is your job function in web design? </h4>
^

Error: element "H4" not allowed here; check which elements this element may be contained within
* Line 66, column 4:

<p><label for="Maintenance">Maintenance. Edit pages already posted. ...
^

Error: element "P" not allowed here; check which elements this element may be contained within
* Line 75, column 5:

<h4> Are you the only Webmaster for your department/agency?</h4>
^

Error: element "H4" not allowed here; check which elements this element may be contained within
* Line 76, column 4:

<p><label>Yes <input type="radio" name="webmaster" value="single" c ...
^

Error: element "P" not allowed here; check which elements this element may be contained within
* Line 79, column 4:

<p><b>If no, would you please sent this URL to the others also? Than ...
^

Error: element "P" not allowed here; check which elements this element may be contained within
* Line 81, column 5:

<h4>Are your Webmaster tasks part of your formal job description?</h ...
^

Error: element "H4" not allowed here; check which elements this element may be contained within
* Line 82, column 4:

<p><label>Yes <input type="radio" name="job" value="YesJob" checked ...
^

Error: element "P" not allowed here; check which elements this element may be contained within
* Line 85, column 5:

<h4>Were you assigned the web tasks or did you volunteer to take the ...
^

Error: element "H4" not allowed here; check which elements this element may be contained within
* Line 86, column 4:

<p> <label >Assigned <input type="radio" name="tasks" value="Assigne ...
^

Error: element "P" not allowed here; check which elements this element may be contained within
* Line 89, column 5:

<h4><label for="7">How many hours a week would you guesstimate you d ...
^

Error: element "H4" not allowed here; check which elements this element may be contained within
* Line 89, column 18:

<h4><label for="7">How many hours a week would you guesstimate you d ...
^

Error: value of attribute "FOR" must start with a letter, not "7"
* Line 91, column 4:

<p>
^

Error: element "P" not allowed here; check which elements this element may be contained within
* Line 92, column 27:

... <input type="text" id="7" name="Hours" size="4" maxlengt ...
^

Error: value of attribute "ID" must start with a letter, not "7"
* Line 95, column 5:

<h4>Is the time you spend doing web work built into your overall wor ...
^

Error: element "H4" not allowed here; check which elements this element may be contained within
* Line 97, column 4:

<p> <label>Yes <input type="radio" name="Scheduled" value="Yes" chec ...
^

Error: element "P" not allowed here; check which elements this element may be contained within
* Line 100, column 5:

<h4>What software programs do you use? </h4>
^

Error: element "H4" not allowed here; check which elements this element may be contained within
* Line 101, column 4:

<p><label>Front Page: <input type="checkbox" name="checkbox" value= ...
^

Error: element "P" not allowed here; check which elements this element may be contained within
* Line 109, column 5:

<h4> What level of training of you have in the software that you do ...
^

Error: element "H4" not allowed here; check which elements this element may be contained within
* Line 110, column 6:

<p><label>Self Taught: <input type="radio" name="radiobutton" va ...
^

Error: element "P" not allowed here; check which elements this element may be contained within
* Line 113, column 35:

... web design <input type="radio" id="20" name="radiobutton" va ...
^

Error: value of attribute "ID" must start with a letter, not "2"
* Line 114, column 35:

... From: <input type="text" id="21" name="certificate" si ...
^

Error: value of attribute "ID" must start with a letter, not "2"
* Line 117, column 5:

<h4>Has your agency/department been able to support the purchase of ...
^

Error: element "H4" not allowed here; check which elements this element may be contained within
* Line 119, column 6:

<p>Yes <input type="radio" id="22" name="software" value="YesSoftw ...
^

Error: element "P" not allowed here; check which elements this element may be contained within
* Line 119, column 35:

... <p>Yes <input type="radio" id="22" name="software" value ...
^

Error: value of attribute "ID" must start with a letter, not "2"
* Line 120, column 31:

... No <input type="radio" id="23" name="software" value="No ...
^

Error: value of attribute "ID" must start with a letter, not "2"
* Line 122, column 13:

</fieldset>
^

Error: missing a required sub-element of "FIELDSET"
* Line 125, column 5:

<p>&nbsp;</p>
^

Error: element "P" not allowed here; check which elements this element may be contained within
* Line 126, column 5:

<h3><legend>Accessibility training: </legend></h3>
^

Error: element "H3" not allowed here; check which elements this element may be contained within
* Line 126, column 13:

<h3><legend>Accessibility training: </legend></h3>
^

Error: element "LEGEND" not allowed here; check which elements this element may be contained within
* Line 127, column 5:

<h4>Are you aware of the ADA guidelines and the ADA policy <br>
^

Error: element "H4" not allowed here; check which elements this element may be contained within
* Line 129, column 6:

<p><label >Yes and I have implemented them. <input type="radio" n ...
^

Error: element "P" not allowed here; check which elements this element may be contained within
* Line 132, column 50:

... at you are talking about. <input type="radio" id="27" name="ADA" value ...
^

Error: value of attribute "ID" must start with a letter, not "2"
* Line 134, column 5:

<h4>Are you aware that a monthly webmasters meeting takes place?</h4 ...
^

Error: element "H4" not allowed here; check which elements this element may be contained within
* Line 135, column 5:

<p><label > Yes<input type="radio" id="28" name="Meetings" value="M ...
^

Error: element "P" not allowed here; check which elements this element may be contained within
* Line 135, column 35:

... label > Yes<input type="radio" id="28" name="Meetings" value ...
^

Error: value of attribute "ID" must start with a letter, not "2"
* Line 136, column 33:

... No <input type="radio" id="29" name="Meetings" value=" ...
^

Error: value of attribute "ID" must start with a letter, not "2"
* Line 137, column 5:

</p>
^

Error: end tag for "LABEL" omitted; possible causes include a missing end tag, improper nesting of elements, or use of an element where it is not allowed
* Line 135, column 6:

<p><label > Yes<input type="radio" id="28" name="Meetings" value="M ...
^

Error: start tag was here
* Line 139, column 5:

<h4>If yes, Does you agency/department give you the time to attend t ...
^

Error: element "H4" not allowed here; check which elements this element may be contained within
* Line 140, column 6:

<p> <label>Yes <input type="radio" id="30" name="Attend" value="A ...
^

Error: element "P" not allowed here; check which elements this element may be contained within
* Line 140, column 35:

... label>Yes <input type="radio" id="30" name="Attend" value=" ...
^

Error: value of attribute "ID" must start with a letter, not "3"
* Line 141, column 32:

... No<input type="radio" id="31" name="Attend" value="Att ...
^

Error: value of attribute "ID" must start with a letter, not "3"
* Line 142, column 35:

... Sometimes <input type="radio" id="32" name="Attend" value=" ...
^

Error: value of attribute "ID" must start with a letter, not "3"
* Line 143, column 4:

</p>
^

Error: end tag for "LABEL" omitted; possible causes include a missing end tag, improper nesting of elements, or use of an element where it is not allowed
* Line 140, column 8:

<p> <label>Yes <input type="radio" id="30" name="Attend" value="A ...
^

Error: start tag was here
* Line 145, column 12:

</fieldset> <fieldset> <legend>
^

Error: missing a required sub-element of "FIELDSET"
* Line 146, column 5:

<h3>Information on the page(s) that you deal with</h3>
^

Error: element "H3" not allowed here; possible cause is an inline element containing a block-level element
* Line 155, column 5:

</p>
^

Error: end tag for "LABEL" omitted; possible causes include a missing end tag, improper nesting of elements, or use of an element where it is not allowed
* Line 149, column 5:

<p><label>Top level:
^

Error: start tag was here
* Line 159, column 18:

<h4><label for="38">Please list below any concerns you may like to s ...
^

Error: value of attribute "FOR" must start with a letter, not "3"
* Line 163, column 34:

... <textarea name="Comments" id="38" cols="75" rows="10" t ...
^

Error: value of attribute "ID" must start with a letter, not "3"
* Line 172, column 8:

</FORM>
^

Error: end tag for element "FORM" which is not open; try removing the end tag or check for improper nesting of elements

I would fix the ID values (start with a letter and make them unique for
each element) and use the W3C HTML validator to discover and clean up
the improper nestings. Maybe just start with a couple of small sections
of the form first in a short page, and if those pass the validator
without errors, then try the screen readers to hear how it sounds. If
that works, then build up the form to the full size, test again, and if
that works, try the whole page. Put this at the very top of the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> so the
validator will use the broadest definition of recommended HTML to do the
check.

Terence de Giere
<EMAIL REMOVED>

>
> Subject:
> Forms
> From:
> "Lavigne, Leesa" < <EMAIL REMOVED> >
> Date:
> Wed, 20 Nov 2002 16:46:06 -0500
> To:
> "' <EMAIL REMOVED> '" < <EMAIL REMOVED> >
>
>
> Would you mind looking at this HTML form? Removed all code except the
> form code for simplicity. Top section is in a table using the for= /
> id= attributes. Seems to work. It's the sections that are located in
> a fieldset instead of a table, using check boxes and radio buttons,
> that is giving me the problems when trying to read the form in JAWS or
> WindowEyes.
> I've tried several different approaches with the code and an
> instructor suggested that I use what is shown here in the code by
> using Headings to highlight the questions and the LABEL element to
> enclose the options.
> Problem is, since I did apply tabindex to every element, the
> questions are not read when the user goes into form reading mode, just
> the options. I've tried using the for= / id= attributes with the
> check boxes and radio buttons and the result wasn't any better. Any
> suggestions? Thanks.
>
>
>




----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/