[Mailman-Developers] Hi! I'll be your intern for the summer :)

[Laura Carlson]

On Thu, Jun 15, 2006 at 09:01:12PM -0400, emf wrote:

> I'm especially interested in getting any feedback, either on the wiki
> or  here, about any and all WebUI - or UI in general - ideas in
> people's  heads.

Hi Ethan,

I mentioned this about a year ago [1], it would be great if the Mailman 
templates, like the general list information page and the user specific 
options page, were accessible and standards compliant.

For instance when the end user views the  current pages, they get form 
labels that are not explicitly associated with their controls.

Using the <label> element is the best way to ensure that people using 
screen readers and other assistive technology have access to all the 
information necessary to complete forms online. This makes it possible 
for screen readers to explicitly identify the onscreen text as a label 
for the <input> element. The <label> element and its for attribute were 
added to HTML specifically to support accessible labeling of form 
controls.

- The <label> element assigns a label to a form <input> element (one 
label to one input).
- The for attribute defines the explicit control that the label is 
associated with.
- The for attribute must match the <input> element's id attribute's 
value exactly.
- Each id attribute must be unique within a document.

Example <label> with for and id attributes markup:

<label for="name">
Your name
<input id="name" name="name" title="Enter your first name." size="40" 
type="text" />
</label>

So...for each form control, place its label in a <label> element. A 
<label> is attached to a specific form control through the use of the 
for attribute. The value of the for attribute must be the same as the 
value of the id attribute of the form control.

When form fields are not labeled explicitly, screen readers will skip 
over the text on your form when users try to enter data. For example, a 
screen reader will simply say, "Edit" or "Edit box," forcing the user 
to guess what information is being requested. Screen readers will not 
speak any text on a form that is not placed inside a tag such as a 
link, label, button, or legend.

When form fields are labeled explicitly, the browser can tell the user 
definitively which label applies to the given control. Usually, 
clicking on the label positions the cursor in the form field, or 
toggles the value of radio buttons or check boxes. This is intuitive 
for many users and provides a larger target for the mouse.

Use of the <label> element is especially important if tables are used 
to lay out a form. Another advantage of using the <label> element is 
that you can have more control over how field labels appear, using 
style sheets.

Related forms accessibility references:

http://joeclark.org/book/sashay/serialization/Chapter12.htm
http://www.accessify.com/features/tutorials/accessible-forms/
http://www.webaim.org/techniques/forms/
http://www.d.umn.edu/goto/accessibility#forms

Also adding alt attributes to images [2], using good html heading
structure [3] [4], and validating to W3C standards [5] [6] would aid 
accessibility.

All the best,
Laura

[1] http://tinyurl.com/ey8tu
[2] http://www.d.umn.edu/goto/accessibility#alt
[3] http://www.webaim.org/techniques/semanticstructure/
[4] http://www.d.umn.edu/goto/standards#structure
[5] http://validator.w3.org/
[6] http://www.d.umn.edu/goto/standards#validation

___________________________________________
Laura L. Carlson
Information Technology Systems and Services
University of Minnesota Duluth
Duluth, MN  55812-3009
http://www.d.umn.edu/goto/webdesign/