Skip to main content

Accessibility UI Guidelines: Tabs

Tabs

3.7 Tabs

Tabs are a common user interface pattern that organizes content into sections, with each section displayed when its corresponding tab is selected. Ensuring tabs are accessible is critical for providing an inclusive experience for all users, including those using assistive technologies.

3.7.1 Semantic Markup

Use semantic HTML and ARIA roles to create accessible tabs. Each tab should be associated with its corresponding content using aria-controls, and the currently active tab should have aria-selected="true".

<!-- Accessible Tabs -->
<div role="tablist" aria-label="Sample Tabs">
    <button role="tab" aria-selected="true" aria-controls="panel1" id="tab1">Tab 1</button>
    <button role="tab" aria-selected="false" aria-controls="panel2" id="tab2">Tab 2</button>
    <button role="tab" aria-selected="false" aria-controls="panel3" id="tab3">Tab 3</button>
</div>

<div id="panel1" role="tabpanel" tabindex="0" aria-labelledby="tab1">
    Content for Tab 1.
</div>
<div id="panel2" role="tabpanel" tabindex="0" aria-labelledby="tab2" hidden>
    Content for Tab 2.
</div>
<div id="panel3" role="tabpanel" tabindex="0" aria-labelledby="tab3" hidden>
    Content for Tab 3.
</div>

3.7.2 Keyboard Accessibility

Ensure tabs are fully keyboard accessible. Use the Tab key to navigate to the tablist, and Arrow keys to switch between tabs.

// Keyboard Navigation for Tabs
const tabs = document.querySelectorAll('[role="tab"]');
const tabPanels = document.querySelectorAll('[role="tabpanel"]');

tabs.forEach((tab, index) => {
    tab.addEventListener('click', () => activateTab(index));
    tab.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowRight') activateTab((index + 1) % tabs.length);
        if (e.key === 'ArrowLeft') activateTab((index - 1 + tabs.length) % tabs.length);
    });
});

function activateTab(index) {
    tabs.forEach((tab, i) => {
        const isActive = i === index;
        tab.setAttribute('aria-selected', isActive);
        tabPanels[i].hidden = !isActive;
    });
}

3.7.3 ARIA Attributes

Use ARIA attributes to enhance the accessibility of tabs. role="tablist" defines the container, role="tab" identifies the tabs, and role="tabpanel" specifies the content panels.

<!-- Tabs with ARIA Attributes -->
<div role="tablist" aria-label="Accessible Tabs">
    <button role="tab" aria-selected="true" aria-controls="tabpanel1" id="tab1">Overview</button>
    <button role="tab" aria-selected="false" aria-controls="tabpanel2" id="tab2">Features</button>
    <button role="tab" aria-selected="false" aria-controls="tabpanel3" id="tab3">Pricing</button>
</div>

<div id="tabpanel1" role="tabpanel" tabindex="0" aria-labelledby="tab1">
    Overview content goes here.
</div>
<div id="tabpanel2" role="tabpanel" tabindex="0" aria-labelledby="tab2" hidden>
    Features content goes here.
</div>
<div id="tabpanel3" role="tabpanel" tabindex="0" aria-labelledby="tab3" hidden>
    Pricing content goes here.
</div>

3.7.4 Responsive Design

Ensure tabs are responsive and adapt to different screen sizes. For smaller screens, consider displaying tab content in a vertical stack or providing a dropdown for navigation.

/* Responsive Tab Styles */
[role="tablist"] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

[role="tab"] {
    flex: 1 1 auto;
    padding: 0.8rem 1.2rem;
    border: 1px solid #ccc;
    border-radius: 0.3rem;
    background: #f9f9f9;
    cursor: pointer;
}

[role="tab"][aria-selected="true"] {
    background: #005fcc;
    color: #fff;
    border-color: #005fcc;
}

3.7.5 Visible Focus Indicators

Provide visible focus indicators for tabs to assist keyboard users in identifying their current position within the tablist.

/* Focus Styles for Tabs */
[role="tab"]:focus {
    outline: 2px solid #005fcc;
    background-color: #e0f0ff;
}

3.7.6 Testing Tabs for Accessibility

Test tabs with assistive technologies and automated tools to ensure they are accessible. Verify proper use of ARIA roles, keyboard navigation, and focus management.

// Test Checklist
// - Verify tabs are keyboard operable using Arrow and Tab keys.
// - Ensure ARIA roles and attributes are correctly implemented.
// - Check screen reader announcements for tablist, tabs, and panels.
// - Validate visible focus indicators for tabs.

Best Practices for Tabs

  • Use Semantic Markup: Structure tabs with proper roles and attributes, ensuring each tab is associated with its content panel.
  • Ensure Keyboard Accessibility: Support navigation between tabs using Arrow keys and activation with the Enter or Space keys.
  • Provide Clear ARIA Roles: Use role="tablist", role="tab", and role="tabpanel" for accessibility.
  • Design for Responsiveness: Ensure tabs work well on all devices and adapt to smaller screens with alternative layouts.
  • Test Thoroughly: Regularly test tabs with assistive technologies to identify and resolve accessibility issues.