W3C home Web Accessibility Initiative (WAI) home

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

[DRAFT] Instructions

  • What to do: Provide clear, well positioned overall and in-line instructions .
  • Why: Users need to be told if any fields require a specific format, or are in themselves required fields.
  • How: Always position instructions ahead of the field or fields that they relate to. Give clear information about any necessary formats, including an example if appropriate. Ensure that in-line instructions are positioned so that they can be announced as part of the field label wherever possible.
  • Conformance: Required to meet SC 3.3.2 Labels and Instructions.

Overview instructions

Position instructions that are common to several fields ahead of the form itself. These should include information on any data format restrictions, how any required fields are identified and can also include help to find in-line format tips.

Overview example

Here are some instructions that should be positioned ahead of the form as a whole, or before a group of fields:

  • All fields marked * must be completed.
  • Dates should all be typed in the format dd/mm/yyy, (as in 21/07/2013).
  • Passwords must contain at least 8 letters and/or numbers.
  • Extra help can be found immediately after each field.

In-line instructions

Some in-line instructions, such as required field indicators must be part of the label itself, otherwise it might not be picked up by screen readers. Other instructions, such as format tips are most accessible as part of the label element, but might be positioned to the right of a field as long as this is included in the overview instruction, otherwise people who can't see the screen won't know whether the tip relates to the field before it or the one after.

In-line example

Code snippet

In-line format instruction as part of the label:

<label for="date">Date (dd-mm-yyyy)</label>
<input type="text" name="date" id="date" />

Full code for instructions example (new window)