3.3.5 Help

Introduction¶

This document provides information about the WCAG criteria Help, and provides ways to find and fix issues that may occur when this check fails.

What¶

Forms can contain fields that may not be self-explanatory. Website owners must provide context-sensitive help with additional guidance so that users can complete them accurately.

Context-sensitive help can take various forms, including:

• Tooltips that appear when a user hovers over an input field.
• Help text that is positioned near the input field.
• Links to detailed instructions or explanations.
• Inline validation messages that clarify expected input formats.

Why¶

Users may have trouble to determine the correct required field entry on forms if there is no guidance for the form field requirements. This section provides information about why this check is important and provides some pass and fail examples.

Why is this important?¶

This check ensures that your website forms provide the following:

• Enhanced usability: Users can complete forms more easily when they understand what information is expected.
• Improved accessibility: Users with cognitive disabilities or who use screen readers or assistive technologies benefit from clear and structured guidance.
• Reduced errors: Users are less likely to enter incorrect data if the system provides context-sensitive help.
• Less frustration: Users are less likely to abandon a form if they have the necessary guidance.

Examples¶

This section provides some pass and fail examples.

Pass examples¶

• Inline help text that provides additional guidance

  copy

  <label for="phone">Phone Number:</label>
  <input type="tel" id="phone" name="phone">
  <small>Format: 123-456-7890</small>

  Why this works:

  • The help text remains visible and provides immediate guidance.
  • Users do not need to guess the required format.

• Tooltip that provides additional information on hover¶

  copy

  <label for="security-code">Security Code:</label>
  <input type="text" id="security-code" name="security-code" aria-describedby="security-help">
  <span id="security-help" class="tooltip">The 3-digit code on the back of your card.</span>

  Why this works:

  • The tooltip provides extra context without cluttering the form.
  • Screen readers can announce the help text through the aria-describedby attribute.

• Link to external help documentation

  copy

  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <a href="help.html#username-guidelines" target="_blank">Need help choosing a username?</a>

  Why this works:

  • Users can access detailed guidance without leaving the form.
  • The help link targets only users who need additional information.

Fail examples¶

• No help provided for unclear input requirements

  copy

  <label for="password">Password:</label>
  <input type="password" id="password" name="password">

  • Issue:
    • There are no instructions about password requirements. These can include length requirements, special character restrictions, format requirements, and so on.
    • Users who enter invalid passwords experience unnecessary frustration.

  • Fix:

    copy

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" aria-describedby="password-help">
    <small id="password-help">Must be at least 8 characters, include one number and one special character.</small>

    Use this format to ensure that users get the information they need about the field entry requirements.

• Placeholder text used instead of proper help text

  copy

  <input type="email" name="email" placeholder="Enter a valid email">

  • Issue:
    • The placeholder disappears when users start to type.
    • It does not provide persistent help.

  • Fix:

    copy

    <label for="email">Email Address:</label>
    <input type="email" id="email" name="email">
    <small>Use a format like [email protected]</small>

    The help text remains visible and ensures accessibility.

• Help text is provided but it is not accessible to screen readers

  copy

  <label for="dob">Date of Birth:</label>
  <input type="text" id="dob" name="dob">
  <span class="tooltip">Format: MM/DD/YYYY</span>

  • Issue:
    • The help text is only available visually and is not announced by screen readers.

  • Fix:

    copy

    <label for="dob">Date of Birth:</label>
    <input type="text" id="dob" name="dob" aria-describedby="dob-help">
    <small id="dob-help">Format: MM/DD/YYYY</small>

    The help text is accessible to all users, and screen readers can announce it.

How¶

This section provides instructions on how to review and fix this issue.

How to review it¶

1. Check if all of the form fields that need additional guidance provide some help instructions.
   • Look for help text, tooltips, or links that explain complex fields.
   • Ensure that help is available for fields that require a specific format such passwords or phone numbers.
2. Ensure that the help content is accessible.
   • Use aria-describedby to associate help text with form fields.
   • Avoid the use of placeholder text as the sole method to provide help.
3. Confirm that the help provided is clear and persistent.
   • The help text must not disappear when users start typing.
   • Users must be able to refer back to the instructions at any time.

How to fix it¶

• Provide inline help text that stays visible

  Example:

  copy

  <label for="zip">ZIP Code:</label>
  <input type="text" id="zip" name="zip" aria-describedby="zip-help">
  <small id="zip-help">Enter a 5-digit ZIP code.</small>

• Use tooltips for additional guidance

  Example:

  copy

  <label for="cvv">CVV Code:</label>
  <input type="text" id="cvv" name="cvv" aria-describedby="cvv-help">
  <span id="cvv-help" class="tooltip">3-digit code on the back of your card.</span>

• Provide links to more detailed help if needed

  Example:

  copy

  <label for="tax-id">Tax ID:</label>
  <input type="text" id="tax-id" name="tax-id">
  <a href="help.html#tax-id" target="_blank">What is a Tax ID?</a>

Additional resources¶

WCAG success criteria¶

3.3.5 Help