3.2.6 Consistent Help

Level: A | Principle: Understandable | Since: WCAG 2.2 | Automation: Manual

What This Means

If a website provides help mechanisms — such as contact information, a help chat widget, a FAQ link, or a support phone number — those mechanisms must appear in the same relative location on every page. Users who need help should not have to hunt for it on each new page.

Who This Affects

Cognitive disability users — they rely on spatial consistency to locate help when they get stuck
Screen reader users — they memorize the position of help mechanisms in the page structure and navigate directly to that location
Low vision users — they use spatial memory to find the help link or button
Everyone — consistent help placement reduces frustration when users need support

Common Pitfalls

1. Help link in footer on some pages, sidebar on others

<!-- Home page: help in footer -->
<footer>
  <a href="/help">Help Center</a>
</footer>

<!-- Products page — Bad: help moved to sidebar -->
<aside>
  <a href="/help">Need help?</a>
</aside>

2. Chat widget visible on some pages but hidden on others

<!-- Bad: chat widget conditionally rendered only on certain pages -->
{isHomePage && <ChatWidget />}

<!-- Good: chat widget appears on every page in the same position -->
<ChatWidget />

3. Contact information in different locations

<!-- Page A: phone number in header -->
<header>
  <a href="tel:+18005551234">1-800-555-1234</a>
</header>

<!-- Page B — Bad: phone number moved to footer -->
<footer>
  <a href="tel:+18005551234">1-800-555-1234</a>
</footer>

How to Fix

Place help mechanisms in a shared layout component

function SiteLayout({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
      <Footer>
        <HelpSection />
      </Footer>
    </>
  );
}

function HelpSection() {
  return (
    <div aria-label="Help">
      <a href="/help">Help Center</a>
      <a href="/contact">Contact Us</a>
      <a href="tel:+18005551234">1-800-555-1234</a>
    </div>
  );
}

Keep chat widgets in a fixed position across all pages

function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <ChatWidget position="bottom-right" />
      </body>
    </html>
  );
}

Use consistent labeling for help mechanisms

<!-- Same text and position on every page -->
<footer>
  <nav aria-label="Help">
    <a href="/faq">FAQ</a>
    <a href="/contact">Contact support</a>
    <a href="tel:+18005551234">Call us: 1-800-555-1234</a>
  </nav>
</footer>

How to Test

Visit at least 3-4 pages on the site and locate all help mechanisms: FAQ links, contact information, chat widgets, support phone numbers, and help center links.
Verify each help mechanism appears in the same relative position on every page (e.g., always in the footer, always in the header).
Check that chat widgets, if present, appear in the same fixed position on all pages.
Open a screen reader and navigate to help mechanisms on multiple pages to confirm they appear at the same structural position.
Pass: All help mechanisms (FAQ, contact, chat, phone) appear in the same relative location on every page.
Fail: Any help mechanism changes position between pages or is absent on some pages where it appears on others.

axe-core Rules

This criterion cannot be detected by automated tools. It requires cross-page layout comparison that axe-core does not perform.