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/