WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Proper title for accordion menu links?

for

From: Simius Puer
Date: Apr 18, 2009 4:05AM

Hi Dean

It might be the context you are using but it sound like you actually want
<label> rather than <legend>. Legend is used to give information to
<fieldset>s not individual input fields e.g.:

<form action="youraction">
<fieldset>
*<legend>*Shipping details*</legend>*
<p>Name: <input type="text" name="shipName"/></p>
<p>Address: <input type="text" name="shipAddress"/></p>
<p>Postal code: <input type="text" name="shipPostcode"/></p>
<p>Country:
<select name="shipCountry">
<option>United Kingdom</option>
<option>United States</option>
</select></p>
</fieldset>
<fieldset>
etc...
</fieldset>
<div id="buttons">
<input type="button" name="Button" value="Submit"/>
</div>
</form>

You should also add <label>s to each field...this sounds like what you are
asking about. Either wrap the <label> around both the visual text and the
input field or associate them using IDs.

If you want to see some example code check out
http://www.elated.com/articles/creating-accessible-web-forms/ ...a good (if
not quite perfect) guide to building accessible forms.

One other minor point - "click" is a device dependent term and best dropped
from your website vocabulary entirely as the same applies to link text etc.
Just dropping the "click to" makes is a) device independent and b) less
monotonous (imaging you have 15-20 input fields all starting "click to").

Also if you are hiding parts of the form until "clicked" upon, you really
need to consider if the hide/show medod you are using is accessible in
itself. There have been many recent discussion about this on this board so
I won't re-hash, just check out the archives.

Have a good weekend