Web Accessibility Best Practices

Campus Information Technologies and Educational Services (CITES) and Disability Resources and Educational Services (DRES)

University of Illinois at Urbana/Champaign

Labels for Form Controls

Form controls should be labeled and grouped to provided explicit references that can be used by screen readers to communicate the purpose of a form control. The tabindex atttribute can be used to make instructions and other information part of the tab navigation ordering, so that screen reader users can easily orient to information needed to complete the form.

HTML Markup

label
Use label as a way to provide text labels for html form controls
fieldset and legend
Use fieldset and legend to provide a text label group of html form controls
tabindex
The tabindex attribute can be used to place important information related to the filling out of a form (e.g. instructions) in the tab navigation order
title
The title attribute should be used on form elements to give the form a title and in some limited cases can be used as alternative to the label element for form controls.

Related Accessibility Requirements

Section 508

Web Content Accessibility Guidelines (WCAG 1.0)

Related Resources

  1. Screen reader software support for the TITLE attribute (Vision Australia)
  2. Assistive technology users test title attribute access (Vision Australia)

Example 1: Shipping Form Using Label Encapsulation

Example 1 uses label encapsulation

Design Issues

Example 2: Shipping Form Using Label Reference

Example 2 uses label reference

Design Issues

Example 3: Shipping Form Using Fieldset for Grouping Controls

Example 3 uses fieldset for grouping related controls

Design Issues

Example 4: Web Survey

Example 4 uses tabindex for creating tab markers at instruction

Design Issues

Example 5: Web Survey with Multi-column Response Controls

Example 5 using hidden labels for providing labels for form controls in tables used for layout

Design Issues