Form Instructions

title: "Form Instructions — Providing Accessible Hints and Help Text" description: "Learn how to provide accessible form instructions using aria-describedby for hints, help text placement, and format guidance that all users can perceive." weight: 10 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, forms]

Form instructions help users understand what data to enter and in what format. Accessible instructions are programmatically associated with their fields using aria-describedby.

## What You'll Learn

How to add hints, format guidance, and help text to form fields in a way that screen readers announce at the right time.

## Why It Matters

Without instructions, users may enter data in the wrong format and face validation errors. Instructions placed visibly and associated programmatically reduce errors and frustration.

## Real-World Use

A password field has instructions: "At least 8 characters, one uppercase letter, one number." These instructions are in a div referenced by aria-describedby. The screen reader announces: "Password, edit, required, At least 8 characters, one uppercase letter, one number."

## Instructions Pattern

```html
<label for="password">Create password</label>
<input type="password" id="password" name="password"
       aria-describedby="password-rules password-strength"
       aria-required="true"
       minlength="8"
       autocomplete="new-password">
<ul id="password-rules">
  <li>At least 8 characters</li>
  <li>One uppercase letter</li>
  <li>One number</li>
</ul>
<div id="password-strength" aria-live="polite"></div>

Contextual Help

<label for="postcode">Postcode</label>
<input type="text" id="postcode" name="postcode"
       aria-describedby="postcode-help postcode-error"
       autocomplete="postal-code">
<button type="button" id="postcode-help"
        aria-label="Help with postcode"
        popovertarget="postcode-popover">?</button>
<div id="postcode-popover" popover>
  UK postcodes are 5-7 characters (e.g., SW1A 1AA)
</div>

Tooltip Alternatives

<label for="sort-code">
  Sort code
  <span aria-hidden="true">(?)</span>
</label>
<input type="text" id="sort-code" name="sort-code"
       aria-describedby="sort-code-hint"
       autocomplete="off"
       pattern="\d{2}-\d{2}-\d{2}"
       placeholder="00-00-00">
<div id="sort-code-hint" class="hint">
  Format: two-digit pairs separated by dashes, e.g., 12-34-56
</div>

Common Mistakes

1. Instructions far from the field

Place instructions immediately after or before the field. Instructions at the top of the form are easily missed.

2. Instructions not associated with aria-describedby

Visual proximity is not enough. Without aria-describedby, screen readers may not announce the instruction.

3. Overly long instructions

Keep instructions concise. If more detail is needed, provide a help link rather than paragraphs of text.

4. Instructions disappear on focus

If instructions hide when the field receives focus, users who need the most guidance lose it exactly when they need it.

5. Icon-only help without accessible name

Help icons must have an accessible name via aria-label or text content inside the button.

Practice Questions

1. What ARIA attribute associates instructions with a form field? aria-describedby on the form control points to the id of the instruction element.

2. Where should instructions be placed in the DOM? Immediately after the form control or adjacent to it, so the screen reader announces them in logical order.

3. Should instructions be visible or hidden? Visible for all users when possible. If space is limited, use a help button or tooltip with proper ARIA.

Challenge: Create a credit card input field with format instructions (16 digits, spaces every 4 digits) associated via aria-describedby. Test with a screen reader.

FAQ

Mini Project

Design a payment form with fields for card number, expiry, CVV, and cardholder name. Add format instructions for each field using aria-describedby. Include a help popover for the CVV field.

What's Next

Learn about Autocomplete Attributes and how they speed up form completion for all users while maintaining security.