Developing Accessible Web Applcations Forms Sample

Demo

Urgency Not UrgentImportantCritical

Spell Checker?

Color Theme

Red White Blue

Special Instructions

Discussion

Form elements are another source of fairly common accessibility problems. The problems are primarily a result of elements, such as textboxes or checkboxes that have no name information. To provide name information to text form element, the LABEL element must be used. This is usually fairly simple, as there is almost always text associated with the element. Where there is no text, the TITLE attribute may be set on the element. An additional benefit of wrapping the text in the LABEL is that the text itself becomes clickable, making things like checking a checkbox much easier.

The FIELDSET element provides grouping information for related items, such as radio buttons. The use of INPUT[SUBMIT] insures that the form is enter-key submittable. INPUT[RESET] allows all form elements to be reset to their default.

For a more complex form example, please see the Tab Control Sample.

• Semantic HTML:
  • FORM element
  • LABEL element
  • FIELDSET element
  • INPUT[SUBMIT] and INPUT[RESET] elements

Sample Code

HTML

<form>
<div>
  <label for="lang">Urgency</label>
  <select id="lang"><option>Not Urgent</option><option>Important</option><option>Critical</option></select>
</div>
<div>
  <input type="checkbox" id="spell" onclick="ToggleTest(this);" /><label for="spell">Spell Checker?</label>
</div>
<fieldset>
  <legend>Color Theme</legend>
  <input type="radio" name="theme" id="theme_red" checked="checked" /><label for="theme_red">Red</label>
  <input type="radio" name="theme" id="theme_white" /><label for="theme_white">White</label>
  <input type="radio" name="theme" id="theme_blue" /><label for="theme_blue">Blue</label>
</fieldset>
<div><label for="special">Special Instructions</label><input type="text" id="special"/></div>
<div><input type="submit" value="Submit" /> <input type="reset" /></div>
</form>