Skip to main content

Provide Context-Sensitive Help

WCAG 2.1 Ultimate Guide
Disabilities Affected: Cognitive, Hearing, Mobility, Visual
Success Criterion: 3.3.5
Level: AAA
WCAG Link

Context-sensitive help must be available for the user.

Why It Matters

Understanding how to use a website or fill out complex forms can be challenging. Providing help information directly within the context where it’s needed reduces cognitive load and frustration, allowing users to complete tasks more easily without having to search extensively for instructions.

Fixing the Issue

Provide help information relevant to the current task or component. Methods include:

  • Inline instructions: Place clear instructions directly before or within complex forms or sections.
  • Contextual links: Provide links (e.g., “?” icons or “Need help?” links) near complex controls or sections that lead to specific help pages or reveal help text.
  • Tooltips/Popovers: Use accessible tooltips (following WCAG 1.4.13) to provide brief help on focus or hover for specific fields or controls.
  • General Help Section: Include a comprehensive, easily accessible “Help” or “FAQ” section covering common tasks and features. Ensure the help information itself is clear, understandable, and accessible.

Good Code Example

Providing inline help text and a link to more info:

  • <form>
  <fieldset>
    <legend>Password Requirements</legend>
    <p id="pwd-instructions">Your password must be at least 12 characters long, include upper and lower case letters, a number, and a symbol.</p>

    <label for="new-password">New Password:</label>
    <input type="password" id="new-password" name="new_pwd" required aria-describedby="pwd-instructions pwd-help-link">
    <span id="pwd-help-link"><a href="/help/password-policy" target="_blank" aria-label="More information about password policy" rel="noopener noreferrer">(More Info)</a></span>
  </fieldset>
  <button type="submit">Set Password</button>
</form>

Bad Code Example

A complex form with no instructions or help mechanisms:

  • <form>
  <label for="field1">Configuration Parameter Alpha:</label>
  <input type="text" id="field1" name="alpha">

  <label for="field2">Dependency Matrix ID:</label>
  <input type="text" id="field2" name="matrix_id">

  <button type="submit">Submit Configuration</button>
</form>
Search Ultimate Guide
Tablet displaying an eBook cover titled 'Integrating Accessibility Compliance Into Your Budget' by AccessiTREE. The cover features a digital tree with accessibility-related icons, symbolizing inclusive design and compliance.
Free eBook
Integrating Accessibility Compliance Into Your Budget

A practical guide for healthcare leaders navigating WCAG compliance.

Learn More
Need help with digital accessibility?
Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.
Schedule Consult