How to Build Accessible Tabs and Accordions

Creating accessible tabs and accordions is essential for enhancing user experience on websites, especially for users relying on assistive technologies. Here’s a step-by-step guide on how to build these interactive components while ensuring accessibility.

Understanding Tabs and Accordions

Tabs allow users to navigate between different content sections, while accordions display content in collapsible sections. Both components can present information in a compact format, making them popular in web design.

Key Accessibility Considerations

When designing tabs and accordions, consider the following:

Keyboard Navigation: Ensure all elements are accessible via the keyboard.
ARIA Roles and Properties: Utilize ARIA (Accessible Rich Internet Applications) roles to enhance screen reader compatibility.
Focus Management: Manage focus appropriately when content is toggled or expanded.

Building Accessible Tabs

1. HTML Structure: Start with a semantic HTML structure using header tags and lists for better SEO and accessibility.



    Tab 1
    Tab 2

Content for Tab 1
Content for Tab 2

2. JavaScript for Interactivity: Add JavaScript to handle clicks and keyboard actions (like the Tab and Enter keys) to switch between tabs.


document.querySelectorAll('[role="tab"]').forEach(tab => {
    tab.addEventListener('click', activateTab);
    tab.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' || e.key === ' ') {
            activateTab.call(this);
        }
    });
});
function activateTab() {
    const tabId = this.getAttribute('aria-controls');
    const tabs = document.querySelectorAll('[role="tab"]');
    const panels = document.querySelectorAll('[role="tabpanel"]');
tabs.forEach(tab => {
        tab.setAttribute('aria-selected', 'false');
        tab.setAttribute('tabindex', '-1');
    });
    panels.forEach(panel => {
        panel.hidden = true;
    });
this.setAttribute('aria-selected', 'true');
    this.setAttribute('tabindex', '0');
    document.getElementById(tabId).hidden = false;
}

Building Accessible Accordions

1. HTML Structure: Use similar accessible attributes as tabs to ensure functionality and compatibility with assistive technologies.



    Accordion Header


    This is the accordion content.

2. JavaScript for Functionality: Write JavaScript to toggle the content and update the 'aria-expanded' attribute accordingly.


document.getElementById('accordion-header').addEventListener('click', function() {
    const accordionContent = document.getElementById('accordion1');
    const isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
    accordionContent.hidden = isExpanded;
});

Testing Accessibility

After building the tabs and accordions, conduct thorough testing:

Use screen readers to ensure content is read correctly.
Check keyboard navigation for all interactive elements.
Utilize accessibility auditing tools to identify potential issues.

By following these guidelines, you can build accessible tabs and accordions that improve user experience for everyone, regardless of their abilities. Implementing these practices not only benefits users but also increases your site's SEO and compliance with web content accessibility standards.

How to Build Accessible Tabs and Accordions