Hello friend!

As a web developer, I know that creating accessible and cross-browser compatible websites is crucial for ensuring that all users can access and use the content and features of a site. In this article, I will discuss some best practices for creating web accessibility tabs.

First, let’s talk about web accessibility. One of the most important things to keep in mind when creating accessible tabs is to make sure that the tabs are easily navigable for users with keyboard only. This means that users should be able to access and switch between tabs using only the keyboard.

One way to make tabs keyboard accessible is to add a “tabindex” attribute to each tab and content panel. The “tabindex” attribute can be used to specify the order in which the tabs should be focused when the user navigates with the keyboard. Additionally, it’s important to add “aria-selected” attribute on the active tab to indicate that it is the currently selected tab.

Here’s an example of how to create keyboard accessible tabs using HTML and JavaScript:

<div class="tabs">
  <button class="tab" tabindex="1" aria-selected="true">Tab 1</button>
  <button class="tab" tabindex="2">Tab 2</button>
  <button class="tab" tabindex="3">Tab 3</button>
</div>
<div class="tab-panels">
  <div class="tab-panel" aria-hidden="false">Content of Tab 1</div>
  <div class="tab-panel" aria-hidden="true">Content of Tab 2</div>
  <div class="tab-panel" aria-hidden="true">Content of Tab 3</div>
</div>

const tabs = document.querySelectorAll('.tab');
const tabPanels = document.querySelectorAll('.tab-panel');

tabs.forEach((tab) => {
  tab.addEventListener('click', (event) => {
    // Remove the 'active' class from all tabs
    tabs.forEach((tab) => tab.classList.remove('active'));
    // Add the 'active' class to the clicked tab
    event.currentTarget.classList.add('active');
    // Hide all tab panels
    tabPanels.forEach((tabPanel) => {
        tabPanel.setAttribute("aria-hidden","true")
    });
    // Show the tab panel that corresponds to the clicked tab
    const tabPanelId = event.currentTarget.getAttribute('aria-controls');
    document.getElementById(tabPanelId).setAttribute("aria-hidden","false");
  });
});

Another way to improve accessibility of tabs is to add a “aria-labelledby” attribute to the tab panel and set its value to the id of the tab. This will help screen readers to understand the relationship between the tabs and the content panel.

In conclusion, creating web accessibility tabs is essential for making sure that all users, including those with disabilities, can access and use the content and features of a site. By adding the “tabindex” attribute, “aria-selected” attribute, and “aria-labelledby” attribute, we can improve the accessibility of tabs. As web developers, it’s important to keep these best practices in mind when creating and maintaining website tabs.

More information can be found in the documentation

Thank you for your read.

Keep it with you so you don’t lose it!