How to Build Accessible Tabs Using JavaScript

How to Build Accessible Tabs Using JavaScript

Creating accessible tabs using JavaScript is essential to ensure that all users, including those with disabilities, can navigate your website efficiently. In this article, you will learn how to build accessible tabs following best practices, focusing on proper markup, ARIA attributes, and keyboard navigation.

1. HTML Structure

The first step in building accessible tabs is to create a proper HTML structure. Use a combination of role="tablist", role="tab", and role="tabpanel" to define your tabs. Here’s an example:

<div role="tablist" aria-label="Sample Tabs">
    <button role="tab" aria-selected="true" aria-controls="tab1" id="tab1-btn">Tab 1</button>
    <button role="tab" aria-selected="false" aria-controls="tab2" id="tab2-btn">Tab 2</button>
    <button role="tab" aria-selected="false" aria-controls="tab3" id="tab3-btn">Tab 3</button>
</div>
<div role="tabpanel" id="tab1" aria-labelledby="tab1-btn">
    Content for Tab 1
</div>
<div role="tabpanel" id="tab2" aria-labelledby="tab2-btn" hidden>
    Content for Tab 2
</div>
<div role="tabpanel" id="tab3" aria-labelledby="tab3-btn" hidden>
    Content for Tab 3
</div>

This code creates a basic tab interface where each tab button is associated with a corresponding panel of content. The initial state shows the first tab as selected and the first panel as visible.

2. JavaScript for Tab Functionality

Next, you need to add JavaScript to handle the tab interactions. This script will manage which tab is currently selected and will update the content visibility accordingly.

const tabs = document.querySelectorAll('[role="tab"]');
const panels = document.querySelectorAll('[role="tabpanel"]');
tabs.forEach(tab => {
    tab.addEventListener('click', () => {
        const selectedTab = tab.getAttribute('aria-controls');
// Deselect all tabs and hide all panels
        tabs.forEach(t => {
            t.setAttribute('aria-selected', 'false');
            document.getElementById(t.getAttribute('aria-controls')).hidden = true;
        });
// Select the clicked tab and display the corresponding panel
        tab.setAttribute('aria-selected', 'true');
        document.getElementById(selectedTab).hidden = false;
    });
});

This script listens for click events on the tabs, and when a tab is clicked, it updates the aria-selected attributes and toggles the visibility of the corresponding panels. All other panels are hidden to ensure only the active content is displayed.

3. Enabling Keyboard Navigation

For better accessibility, you should also enable keyboard navigation. This allows users to navigate through the tabs using the arrow keys.

tabs.forEach((tab, index) => {
    tab.addEventListener('keydown', (event) => {
        let newIndex;
if (event.key === 'ArrowRight') {
            newIndex = (index + 1) % tabs.length;
        } else if (event.key === 'ArrowLeft') {
            newIndex = (index - 1 + tabs.length) % tabs.length;
        } else {
            return;
        }
tabs[newIndex].focus();
        tabs[newIndex].click();
        event.preventDefault();
    });
});

This code allows users to use the right and left arrow keys to navigate through the tabs. When a new tab is focused, it triggers a click event to update the content displayed.

4. Conclusion

Building accessible tabs using JavaScript is crucial for enhancing user experience and making your website inclusive. By following the structure outlined in this article and implementing JavaScript for interactivity, you create an engaging and accessible environment for all users. Remember to test your implementation with screen readers and keyboard navigation to ensure full accessibility.