W3C home Web Accessibility Initiative (WAI) home

WAI: Strategies, guidelines, resources to make the Web accessible to people with disabilities

[DRAFT] Structure

  • What to do: Build a logical structure into your forms. Split long forms over several topic organised pages, and code related groups of controls using structural elements to define the topic they have in common.
  • Why: Forms that are split into logical stages over several pages can make it easier for people with learning difficulties to concentrate. Grouping related fields can ensure that the topic as well as the individual label can be announced by screen readers.
  • How: Plan any long form so that, wherever possible, it is presented in logical stages. Use <fieldset> and <legend> elements to give the overall topic of groups of form controls.
  • Conformance: Required to meet SC 1.3.1 Info and Relationships and SC 3.3.2 Labels and Instructions.

Forms spanning multiple pages

Some forms, such as for on-line purchasing are a typical example where topic division is almost essential. It presents fewer challenges when users have manageable stages to complete.

  • Where a form spans several pages, the first stage should explain how many stages will need to be followed, and how users can find any help that may be provided along the way.
  • Within each stage, let users know their current position in the process, what to do for this stage, and provide a reminder about help messages or mandatory fields.

Grouping related fields

The fieldset element is needed to establish relationships between groups of form fields, to help users to focus on the particular topic in hand.

Fieldset example

I want to receive

Code snippet

Using fieldset and legend elements:

<legend>I want to receive</legend>

Full code for structure example (new window)