[Challenge]: Inaccessible Custom Tabs

[d-koppenhagen]

Working title

Tab Out of Control

Accessibility problem

A tab widget built entirely from <div> elements and CSS. No ARIA roles (tablist, tab, tabpanel), no keyboard navigation (Arrow keys), no aria-selected state. Screen readers see only generic text and divs — not a tab interface. Keyboard users must Tab through all tab elements rather than using Arrow keys between them. The active panel relationship is purely visual.

Learning objective

• Learn the complete ARIA tab pattern: role="tablist", role="tab", role="tabpanel"
• Implement correct keyboard interaction (Arrow keys between tabs, Tab into panel)
• Use aria-selected, aria-controls, and aria-labelledby to communicate state and relationships
• Understand the roving tabindex pattern (tabindex="0" on active tab, tabindex="-1" on others)

Difficulty

advanced

Related WCAG success criterion

4.1.2 Name, Role, Value (Level A), 2.1.1 Keyboard (Level A)

References

• APG: Tabs Pattern

Learning objective

• Learn the complete ARIA/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role)
• Deque: ARIA Tabs
• Inclusive Components: Tabbed Interfaces

Before submitting

• I searched existing issues and didn't find a similar proposal.

[d-koppenhagen]

Starter code (broken)

<div class="tabs">
  <div class="tab-list">
    <div class="tab active" onclick="showPanel('overview')">Overview</div>
    <div class="tab" onclick="showPanel('features')">Features</div>
    <div class="tab" onclick="showPanel('pricing')">Pricing</div>
  </div>

  <div class="panel active" id="panel-overview">
    <h2>Overview</h2>
    <p>Welcome to our product overview.</p>
  </div>
  <div class="panel" id="panel-features">
    <h2>Features</h2>
    <p>Here are the key features.</p>
  </div>
  <div class="panel" id="panel-pricing">
    <h2>Pricing</h2>
    <p>Choose a plan that works for you.</p>
  </div>
</div>

.tab-list {
  display: flex;
  border-bottom: 2px solid #ddd;
}
.tab {
  padding: 12px 24px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.tab.active {
  border-bottom-color: #0066cc;
  color: #0066cc;
}
.panel {
  display: none;
  padding: 16px;
}
.panel.active {
  display: block;
}

function showPanel(name) {
  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
  document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
  event.target.classList.add('active');
  document.getElementById('panel-' + name).classList.add('active');
}

Solution code (fixed)

<div class="tabs">
  <div class="tab-list" role="tablist" aria-label="Product information">
    <button role="tab" id="tab-overview" aria-selected="true" aria-controls="panel-overview" tabindex="0">Overview</button>
    <button role="tab" id="tab-features" aria-selected="false" aria-controls="panel-features" tabindex="-1">Features</button>
    <button role="tab" id="tab-pricing" aria-selected="false" aria-controls="panel-pricing" tabindex="-1">Pricing</button>
  </div>

  <div role="tabpanel" id="panel-overview" aria-labelledby="tab-overview" tabindex="0">
    <h2>Overview</h2>
    <p>Welcome to our product overview.</p>
  </div>
  <div role="tabpanel" id="panel-features" aria-labelledby="tab-features" tabindex="0" hidden>
    <h2>Features</h2>
    <p>Here are the key features.</p>
  </div>
  <div role="tabpanel" id="panel-pricing" aria-labelledby="tab-pricing" tabindex="0" hidden>
    <h2>Pricing</h2>
    <p>Choose a plan that works for you.</p>
  </div>
</div>

.tab-list {
  display: flex;
  border-bottom: 2px solid #ddd;
}
[role="tab"] {
  padding: 12px 24px;
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
[role="tab"][aria-selected="true"] {
  border-bottom-color: #0066cc;
  color: #0066cc;
}
[role="tab"]:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: -2px;
}
[role="tabpanel"] {
  padding: 16px;
}

const tabList = document.querySelector('[role="tablist"]');
const tabs = tabList.querySelectorAll('[role="tab"]');
const panels = document.querySelectorAll('[role="tabpanel"]');

tabs.forEach(tab => {
  tab.addEventListener('click', () => activateTab(tab));
  tab.addEventListener('keydown', (e) => {
    const index = Array.from(tabs).indexOf(tab);
    let newIndex;
    if (e.key === 'ArrowRight') newIndex = (index + 1) % tabs.length;
    else if (e.key === 'ArrowLeft') newIndex = (index - 1 + tabs.length) % tabs.length;
    else if (e.key === 'Home') newIndex = 0;
    else if (e.key === 'End') newIndex = tabs.length - 1;
    else return;
    e.preventDefault();
    activateTab(tabs[newIndex]);
    tabs[newIndex].focus();
  });
});

function activateTab(tab) {
  tabs.forEach(t => {
    t.setAttribute('aria-selected', 'false');
    t.setAttribute('tabindex', '-1');
  });
  panels.forEach(p => p.hidden = true);

  tab.setAttribute('aria-selected', 'true');
  tab.setAttribute('tabindex', '0');
  document.getElementById(tab.getAttribute('aria-controls')).hidden = false;
}