3.3.5 Help

Level: AAA | Principle: Understandable | Since: WCAG 2.0 | Automation: Manual

What This Means

Context-sensitive help is available for form inputs and interactions. When users encounter a form field or interactive element, they must have access to help text that explains what is expected, what format to use, or how to complete the task.

This goes beyond labels and error messages. Context-sensitive help means the assistance is specific to the field or task the user is currently working on — not just a general FAQ page. Examples include inline help text below a field, a tooltip with formatting instructions, an expandable help section, or a help icon that reveals additional guidance.

For complex forms (tax filings, medical records, technical configurations), context-sensitive help can be the difference between completing the form correctly and abandoning it in frustration.

Who This Affects

  1. Users with cognitive disabilities — need clear guidance to understand what each field expects
  2. Users with learning disabilities — benefit from examples and formatting hints
  3. Older adults — may be unfamiliar with digital form conventions
  4. All users encountering complex forms — tax forms, insurance applications, and technical configurations

Common Pitfalls

1. Form fields with no help text

<!-- Bad: no guidance on expected format -->
<label for="phone">Phone number</label>
<input type="tel" id="phone" name="phone">

<!-- Good: help text explains the expected format -->
<label for="phone">Phone number</label>
<input type="tel" id="phone" name="phone" aria-describedby="phone-help">
<p id="phone-help" class="help-text">Format: (555) 123-4567. Include area code.</p>

2. Complex fields without examples

<!-- Bad: regex pattern with no explanation -->
<label for="sku">Product SKU</label>
<input type="text" id="sku" name="sku" pattern="[A-Z]{2}-\d{4}">

<!-- Good: example and explanation provided -->
<label for="sku">Product SKU</label>
<input type="text" id="sku" name="sku" pattern="[A-Z]{2}-\d{4}" aria-describedby="sku-help">
<p id="sku-help" class="help-text">
  Two uppercase letters, a dash, then four digits. Example: AB-1234
</p>

3. No help mechanism for multi-step processes

<!-- Bad: step with no contextual guidance -->
<h2>Step 3: Tax Information</h2>
<label for="tin">Tax Identification Number</label>
<input type="text" id="tin" name="tin">

<!-- Good: expandable help section for the step -->
<h2>Step 3: Tax Information</h2>
<details>
  <summary>Help with this step</summary>
  <p>Your Tax Identification Number (TIN) is a 9-digit number assigned by the IRS.
  For individuals, this is your Social Security Number. For businesses, this is your
  Employer Identification Number (EIN). You can find it on your tax return or W-2 form.</p>
</details>
<label for="tin">Tax Identification Number</label>
<input type="text" id="tin" name="tin" aria-describedby="tin-help">
<p id="tin-help" class="help-text">9 digits, no dashes. Example: 123456789</p>

How to Test

  1. Navigate through every form on the site, field by field, and check whether help text is available (inline text below the field, a help icon/tooltip, or an expandable explanation).
  2. For fields with specific format requirements (phone numbers, dates, SKUs, passwords), verify an example of valid input is provided.
  3. Check that help text is programmatically associated with its field using aria-describedby.
  4. For complex multi-step forms, look for expandable help sections or contextual guidance for each step.
  5. Pass: Every form field that might cause confusion has context-sensitive help text, format examples, and the help is linked via aria-describedby.
  6. Fail: Any confusing or complex field lacks help text, format examples are missing, or help text is not programmatically associated with the field.

How to Fix

  1. Add descriptive help text below every form field that might cause confusion
  2. Use aria-describedby to programmatically associate help text with form inputs
  3. Include examples of valid input for fields with specific formatting requirements
  4. Add expandable help sections (<details>) for complex form steps
  5. Provide a help link or chat option on pages with complex interactions

Resources

  1. WCAG Understanding 3.3.5
  2. How to Meet 3.3.5