WCAG 3.2.6 Consistent Help: Complete Implementation Guide

WCAG 3.2.6 Consistent Help is a new Level A success criterion introduced in WCAG 2.2. It requires that help mechanisms (contact information, chatbots, help forms, etc.) appear in the same relative order across multiple pages when they're available.

This is a Level A requirement, meaning it's fundamental for accessibility compliance under ADA, Section 508, and the European Accessibility Act (EAA).

What Does WCAG 3.2.6 Require?

Official Definition:

If a Web page contains any of the following help mechanisms, and those mechanisms are repeated on multiple Web pages within a set of Web pages, they occur in the same order relative to other page content, unless a change is initiated by the user:

• Human contact details
• Human contact mechanism
• Self-help option
• A fully automated contact mechanism

In Plain English: If you have a "Contact Us" link, live chat button, or help center link on multiple pages, it must appear in the same relative position on each page. Users shouldn't have to hunt for help in different locations.

Key Points:

• ✅ Applies to help mechanisms repeated across pages
• ✅ Must maintain same relative order (not necessarily same pixel position)
• ✅ Includes contact info, chat, help links, phone numbers
• ✅ Exception: User-initiated changes (mobile menu toggle)

Why This Matters

Real-World Impact:

Problem Scenario

User encounters problem on checkout page
→ Finds "Contact Support" link in footer
→ Navigates to payment page to ask question
→ "Contact Support" now in header (different location)
→ User confused, can't find help
→ Abandons cart in frustration

Who This Helps:

• Users with cognitive disabilities: Difficulty adapting to changing layouts
• Users with low vision: Screen magnification makes inconsistency harder to spot
• Older adults: Prefer predictable, consistent interfaces
• Everyone under stress: When you need help, you need it quickly

Statistics:

• 70% of customers abandon purchase when they can't find help
• Consistent navigation reduces task completion time by 25%
• Users with cognitive disabilities take 2-3x longer to locate inconsistent elements

Common Failure Patterns

❌ Failure 1: Help Link Changes Position

<!-- Homepage: Help link in header -->
<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/help">Help</a>  <!-- Position: After About -->
  </nav>
</header>

<!-- Product page: Help link in footer (FAILS 3.2.6) -->
<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <!-- Help link missing from same position -->
  </nav>
</header>

<footer>
  <a href="/help">Help</a>  <!-- Now in different location -->
</footer>

Problem: Help link moves from header to footer between pages.

❌ Failure 2: Inconsistent Contact Information Order

<!-- Page 1: Contact info in this order -->
<aside class="contact-info">
  <a href="tel:555-0123">Call: 555-0123</a>
  <a href="mailto:help@example.com">Email Us</a>
  <a href="/chat">Live Chat</a>
</aside>

<!-- Page 2: Different order (FAILS 3.2.6) -->
<aside class="contact-info">
  <a href="/chat">Live Chat</a>  <!-- Now first -->
  <a href="tel:555-0123">Call: 555-0123</a>  <!-- Now second -->
  <a href="mailto:help@example.com">Email Us</a>  <!-- Now third -->
</aside>

Problem: Same help mechanisms in different order across pages.

❌ Failure 3: Chat Button Position Varies

<!-- Homepage: Chat button bottom-right -->
<div class="chat-widget" style="position: fixed; bottom: 20px; right: 20px;">
  <button>Chat with us</button>
</div>

<!-- Checkout: Chat button top-left (FAILS 3.2.6) -->
<div class="chat-widget" style="position: fixed; top: 20px; left: 20px;">
  <button>Chat with us</button>
</div>

Problem: Chat widget changes corner of screen.

✅ Solution 1: Consistent Header Navigation

Place help links in same header position across all pages:

<!-- Global header component (used on all pages) -->
<header class="site-header">
  <div class="container">
    <a href="/" class="logo">
      <img src="/logo.svg" alt="Company Name">
    </a>

    <nav class="main-nav" aria-label="Main navigation">
      <ul>
        <li><a href="/products">Products</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/blog">Blog</a></li>
        <!-- Help link always in same position -->
        <li><a href="/help">Help Center</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>

    <!-- Secondary help mechanisms also consistent -->
    <div class="header-actions">
      <a href="tel:+1-555-0123" class="phone-link">
        <svg aria-hidden="true"><!-- phone icon --></svg>
        <span>Call: (555) 0123</span>
      </a>
      <button class="chat-button" onclick="openChat()">
        <svg aria-hidden="true"><!-- chat icon --></svg>
        <span>Live Chat</span>
      </button>
    </div>
  </div>
</header>

<style>
/* Consistent positioning */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
  border-bottom: 1px solid #e0e0e0;
}

.main-nav ul {
  display: flex;
  gap: 24px;
  list-style: none;
  /* Help link always 4th item, Contact always 5th */
}

.header-actions {
  display: flex;
  gap: 16px;
  /* Phone link always before chat button */
}
</style>

✅ Solution 2: Consistent Footer Contact Section

Maintain same order in footer across all pages:

<!-- Global footer component (used on all pages) -->
<footer class="site-footer">
  <div class="container">
    <div class="footer-grid">
      <!-- Always first column -->
      <div class="footer-column">
        <h3>Need Help?</h3>
        <ul class="help-links">
          <!-- Consistent order: -->
          <li><a href="/help">Help Center</a></li>
          <li><a href="/faq">FAQs</a></li>
          <li><a href="/contact">Contact Us</a></li>
          <li><a href="/live-chat" onclick="openChat()">Live Chat</a></li>
        </ul>
      </div>

      <!-- Always second column -->
      <div class="footer-column">
        <h3>Contact Information</h3>
        <ul class="contact-methods">
          <!-- Consistent order: -->
          <li>
            <strong>Phone:</strong>
            <a href="tel:+1-555-0123">(555) 0123</a>
          </li>
          <li>
            <strong>Email:</strong>
            <a href="mailto:support@example.com">support@example.com</a>
          </li>
          <li>
            <strong>Hours:</strong>
            Mon-Fri 9am-5pm EST
          </li>
        </ul>
      </div>

      <!-- Other columns -->
      <div class="footer-column">
        <h3>Company</h3>
        <!-- ... -->
      </div>
    </div>
  </div>
</footer>

<style>
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}

/* Help column always first on all screen sizes */
.footer-column:first-child {
  order: 1;
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* Maintain order even on mobile */
  .footer-column:nth-child(1) { order: 1; }
  .footer-column:nth-child(2) { order: 2; }
  .footer-column:nth-child(3) { order: 3; }
}
</style>

✅ Solution 3: Fixed-Position Chat Widget

Keep chat widget in same corner across all pages:

<!-- Chat widget component (loaded on all pages) -->
<div id="chat-widget" class="chat-widget">
  <button
    id="chat-toggle"
    class="chat-toggle"
    aria-label="Open live chat"
    aria-expanded="false">
    <svg aria-hidden="true" width="24" height="24">
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
    </svg>
    <span class="chat-badge" id="unread-badge" hidden>0</span>
  </button>

  <div id="chat-panel" class="chat-panel" hidden>
    <div class="chat-header">
      <h2>Live Chat</h2>
      <button
        id="chat-close"
        class="chat-close"
        aria-label="Close chat">
        ×
      </button>
    </div>
    <div class="chat-messages" role="log" aria-live="polite"></div>
    <form class="chat-input">
      <label for="message-input" class="visually-hidden">Type your message</label>
      <input
        type="text"
        id="message-input"
        placeholder="Type your message..."
        aria-label="Chat message">
      <button type="submit">Send</button>
    </form>
  </div>
</div>

<style>
.chat-widget {
  /* ALWAYS in same position across all pages */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

.chat-toggle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #0066cc;
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
}

.chat-toggle:hover {
  background: #0052a3;
  transform: scale(1.05);
}

.chat-panel {
  position: absolute;
  bottom: 80px;
  right: 0;
  width: 350px;
  height: 500px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

/* Ensure same position even on mobile */
@media (max-width: 768px) {
  .chat-widget {
    bottom: 20px;  /* Same bottom position */
    right: 20px;   /* Same right position */
  }

  .chat-panel {
    width: calc(100vw - 40px);
    max-width: 350px;
  }
}
</style>

<script>
// Initialize chat widget (same script on all pages)
(function() {
  const chatToggle = document.getElementById('chat-toggle');
  const chatPanel = document.getElementById('chat-panel');
  const chatClose = document.getElementById('chat-close');

  chatToggle.addEventListener('click', () => {
    const isOpen = chatPanel.hidden === false;
    chatPanel.hidden = !isOpen;
    chatToggle.setAttribute('aria-expanded', String(!isOpen));
  });

  chatClose.addEventListener('click', () => {
    chatPanel.hidden = true;
    chatToggle.setAttribute('aria-expanded', 'false');
    chatToggle.focus();
  });
})();
</script>

✅ Solution 4: Component-Based Approach (React)

Use shared components to ensure consistency:

// components/HelpMenu.jsx
import Link from 'next/link';

export function HelpMenu({ location = 'header' }) {
  // Same help items in same order everywhere
  const helpItems = [
    { label: 'Help Center', href: '/help', icon: '📚' },
    { label: 'FAQs', href: '/faq', icon: '❓' },
    { label: 'Contact Us', href: '/contact', icon: '✉️' },
    { label: 'Live Chat', href: '#', onClick: openChat, icon: '💬' }
  ];

  return (
    <nav
      className={`help-menu help-menu--${location}`}
      aria-label="Help and support">
      <ul>
        {helpItems.map((item, index) => (
          <li key={index}>
            {item.onClick ? (
              <button onClick={item.onClick}>
                <span aria-hidden="true">{item.icon}</span>
                {item.label}
              </button>
            ) : (
              <Link href={item.href}>
                <span aria-hidden="true">{item.icon}</span>
                {item.label}
              </Link>
            )}
          </li>
        ))}
      </ul>
    </nav>
  );
}

// Usage in layout
export default function Layout({ children }) {
  return (
    <>
      <header>
        <nav>
          <Link href="/">Home</Link>
          <Link href="/products">Products</Link>
          {/* Help menu always in same position */}
          <HelpMenu location="header" />
        </nav>
      </header>

      <main>{children}</main>

      <footer>
        {/* Same component ensures same order */}
        <HelpMenu location="footer" />
      </footer>

      {/* Chat widget always bottom-right */}
      <ChatWidget position="bottom-right" />
    </>
  );
}

✅ Solution 5: Consistent Mobile Menu

Maintain help order in responsive navigation:

<header class="site-header">
  <!-- Desktop navigation -->
  <nav class="desktop-nav" aria-label="Main navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
      <li><a href="/about">About</a></li>
      <!-- Help always in same position -->
      <li><a href="/help">Help</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>

  <!-- Mobile menu -->
  <button
    class="mobile-menu-toggle"
    aria-expanded="false"
    aria-controls="mobile-menu">
    Menu
  </button>

  <nav id="mobile-menu" class="mobile-nav" hidden>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
      <li><a href="/about">About</a></li>
      <!-- SAME ORDER as desktop -->
      <li><a href="/help">Help</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>

    <!-- Contact methods also in consistent order -->
    <div class="mobile-contact">
      <h3>Get Help</h3>
      <ul>
        <!-- Always in this order: -->
        <li><a href="tel:555-0123">📞 Call Us</a></li>
        <li><a href="mailto:help@example.com">✉️ Email</a></li>
        <li><button onclick="openChat()">💬 Live Chat</button></li>
      </ul>
    </div>
  </nav>
</header>

<style>
/* Desktop navigation */
@media (min-width: 769px) {
  .desktop-nav { display: block; }
  .mobile-menu-toggle { display: none; }
  .mobile-nav { display: none; }
}

/* Mobile navigation */
@media (max-width: 768px) {
  .desktop-nav { display: none; }
  .mobile-menu-toggle { display: block; }

  .mobile-nav {
    /* Full-screen overlay */
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 999;
  }

  .mobile-nav ul {
    /* Same vertical order as desktop horizontal order */
    display: flex;
    flex-direction: column;
  }
}
</style>

Help Mechanism Types

1. Human Contact Details

<!-- Physical address, phone, email -->
<address>
  <strong>Support Center</strong><br>
  123 Main Street<br>
  Portland, OR 97201<br>
  <a href="tel:+1-555-0123">Phone: (555) 0123</a><br>
  <a href="mailto:support@example.com">support@example.com</a>
</address>

2. Human Contact Mechanism

<!-- Contact form, chat, callback request -->
<section class="contact-mechanisms">
  <h2>Contact Us</h2>
  <ul>
    <li><a href="/contact-form">Submit Contact Form</a></li>
    <li><button onclick="openChat()">Start Live Chat</button></li>
    <li><a href="/callback">Request Callback</a></li>
  </ul>
</section>

3. Self-Help Option

<!-- FAQs, knowledge base, tutorials -->
<section class="self-help">
  <h2>Self-Service Help</h2>
  <ul>
    <li><a href="/help">Help Center</a></li>
    <li><a href="/faq">Frequently Asked Questions</a></li>
    <li><a href="/tutorials">Video Tutorials</a></li>
    <li><a href="/documentation">Documentation</a></li>
  </ul>
</section>

4. Fully Automated Contact Mechanism

<!-- Chatbot, automated phone system -->
<button onclick="startChatbot()" class="chatbot-trigger">
  <svg aria-hidden="true"><!-- bot icon --></svg>
  Ask our AI Assistant
</button>

Testing for 3.2.6 Compliance

Manual Testing Checklist

1. Identify all help mechanisms on your site:

   • Contact links
   • Phone numbers
   • Email addresses
   • Chat widgets
   • Help center links
   • FAQ links

2. Check consistency across pages:

   • Open 5-10 different pages
   • Note position of each help mechanism
   • Verify they appear in same relative order

3. Test responsive layouts:

   • Check desktop, tablet, mobile
   • Verify order maintained across breakpoints

Automated Testing

// Test for consistent help mechanism order
function test326Compliance() {
  // Define help mechanism selectors
  const helpSelectors = [
    'a[href*="/help"]',
    'a[href*="/contact"]',
    'a[href*="/faq"]',
    'a[href^="tel:"]',
    'a[href^="mailto:"]',
    'button[class*="chat"]',
    '.chatbot',
    '.help-widget'
  ];

  const pages = [
    '/',
    '/products',
    '/about',
    '/checkout'
    // Add more pages to test
  ];

  const results = [];

  // This would need to run across multiple page loads
  // For demonstration, checking current page only
  const helpElements = [];

  helpSelectors.forEach(selector => {
    const elements = document.querySelectorAll(selector);
    elements.forEach(el => {
      helpElements.push({
        selector: selector,
        text: el.textContent.trim(),
        order: getElementOrder(el)
      });
    });
  });

  // Sort by DOM order
  helpElements.sort((a, b) => a.order - b.order);

  console.log('Help mechanisms in DOM order:');
  console.table(helpElements);

  return helpElements;
}

function getElementOrder(element) {
  let order = 0;
  let el = element;

  while (el.previousElementSibling) {
    order++;
    el = el.previousElementSibling;
  }

  // Add parent's order
  if (element.parentElement) {
    order += getElementOrder(element.parentElement) * 1000;
  }

  return order;
}

// Run test
test326Compliance();

Implementation Checklist

Site-Wide Consistency

• Create shared header/footer components
• Use same navigation structure on all pages
• Maintain help mechanism order in templates
• Document help placement in style guide

Help Mechanisms

• List all help mechanisms on site
• Define standard order for each mechanism type
• Implement in shared components
• Test across different page types

Responsive Design

• Verify order consistency on mobile
• Check tablet layouts
• Test menu toggle states
• Ensure same order in all viewports

Documentation

• Document help mechanism locations
• Create component usage guidelines
• Add to design system
• Train content editors on consistency

Common Mistakes to Avoid

❌ Mistake 1: Different Order on Different Templates

<!-- Homepage template -->
<nav>
  <a href="/help">Help</a>
  <a href="/contact">Contact</a>
</nav>

<!-- Product template (WRONG - different order) -->
<nav>
  <a href="/contact">Contact</a>
  <a href="/help">Help</a>
</nav>

✅ Fix: Use same component/include for both templates.

❌ Mistake 2: Responsive Reordering

/* WRONG: Changes order on mobile */
@media (max-width: 768px) {
  .help-link { order: 3; }
  .contact-link { order: 1; }
}

✅ Fix: Maintain same relative order across all breakpoints.

❌ Mistake 3: Chat Widget Moves

// WRONG: Different position based on page
if (page === 'checkout') {
  chatWidget.style.top = '20px';
} else {
  chatWidget.style.bottom = '20px';
}

✅ Fix: Keep chat widget in same position always.

Real-World Examples

✅ Good Example: Amazon

Amazon maintains consistent help placement:

• "Customer Service" always in same header position
• "Help" link always in footer, same column
• Chat widget always bottom-right when available

✅ Good Example: Shopify Admin

Shopify admin keeps help consistent:

• "?" help icon always top-right
• "Support" link always in same menu position
• Consistent across all admin pages

❌ Bad Example: Inconsistent E-commerce Sites

Common violations:

• Contact link in header on homepage, footer on product pages
• Chat button different corners on different pages
• Help center link moves around navigation

How AllAccessible Helps

AllAccessible automatically detects help mechanism inconsistencies:

Automatic Detection:

• Scans all pages for help mechanisms
• Maps position and order of each mechanism
• Identifies inconsistencies across pages
• Reports violations with specific examples

Recommended Fixes:

• Suggests component-based approach
• Provides standardized help menu markup
• Recommends consistent positioning
• Documents standard order for your site

Start Free Trial - Ensure consistent help across your site - starting at $10/month.

Related Resources

📖 Master WCAG 2.2: Complete WCAG 2.2 Compliance Guide

Related Success Criteria:

• 3.2.3 Consistent Navigation
• 3.2.4 Consistent Identification
• 3.3.7 Redundant Entry

Implementation Guides:

• Design System for Accessibility
• Component Library Best Practices
• Navigation Patterns for Accessibility

Summary

WCAG 3.2.6 Consistent Help Requirements:

• ✅ Level A (fundamental requirement)
• ✅ Help mechanisms must appear in same relative order across pages
• ✅ Applies to contact info, chat, help links, phone numbers
• ✅ User-initiated changes (menu toggles) are exempt

Quick Implementation:

<!-- Use shared component everywhere -->
<HelpMenu>
  <a href="/help">Help Center</a>     <!-- Always first -->
  <a href="/contact">Contact</a>       <!-- Always second -->
  <button onclick="chat()">Chat</button> <!-- Always third -->
</HelpMenu>

Test by: Navigating through multiple pages and verifying help mechanisms appear in same order.

Need help ensuring consistent help placement across your site? AllAccessible automatically detects and fixes these issues - starting at $10/month.