Creating accessible user interfaces is not just a compliance requirement; It is a necessity to ensure that all users, including those with disabilities, can navigate and use your web applications efficiently. Today we are going to delve into how to develop an accessible tab system in JavaScript, following the guidelines of the WCAG (Web Content Accessibility Guidelines) standards.
What does it mean to create an accessible tab system?
An accessible tab system allows users to easily navigate between different views or sections of content grouped under common tabs, without obstacles for users with disabilities. This involves support for keyboard navigation, screen readers, and adherence to other web accessibility principles defined by WCAG.
Step 1: Planning and Structured Design
Before writing a single line of code, it is crucial to understand and plan the structure of your tab system. How many lashes do you need? What content will go in each tab? Careful planning helps ensure that the final structure is logical and easy to navigate.
Basic HTML Structure
An accessible tab system starts with proper HTML markup. Use <div> o for the main container of the tabs and for each tab header, ensuring that each tab is focusable and keyboard-activatable.
<div role="tablist" aria-label="Content Sections">
<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Tab 1</button>
<button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Tab 2</button>
...
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="0">Contents of Tab 1</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" tabindex="0" hidden>Tab 2 Content</div>
...Step 2: Interaction with JavaScript
With the HTML in place, the next step is to bring the tabs to life using JavaScript. This involves handling keyboard and click events to switch between tabs and updating the ARIA attributes accordingly.
Tab Control with JavaScript
To make tabs interactive, you must add an event handler to each tab button. This handler will check and change the active tab, updating the visible content.
document.querySelectorAll('[role="tab"]').forEach(tab => {
tab.addEventListener('click', changeTab);
tab.addEventListener('keydown', navigateTabs);
});
function changeTab(event) {
const activatedTab = event.target;
const controls = activatedTab.getAttribute('aria-controls');
document.querySelectorAll('[role="tabpanel"]').forEach(panel => {
if (panel.getAttribute('id') === controls) {
panel.hidden = false;
activatedTab.setAttribute('aria-selected', 'true');
} else {
panel.hidden = true;
document.getElementById(panel.getAttribute('aria-labelledby')).setAttribute('aria-selected', 'false');
}
});
}
function navigateTabs(event) {
let newTab;
switch (event.key) {
case "ArrowLeft":
newTab = event.target.previousElementSibling || getLastTab();
break;
case "ArrowRight":
newTab = event.target.nextElementSibling || getFirstTab();
break;
default:
return;
}
newTab.focus();
}Support for Screen Readers
Thanks to ARIA attributes like aria-controls, aria-selected, role="tab", and others, your tab system will be more understandable for users who rely on assistive technologies.
Step 3: Styling and Testing
While functionality is crucial, visuals are also important to deliver a consistent user experience. Use CSS to style your active and inactive tabs, and make sure focus states are clear to aid navigability.
button[role="tab"] { background-color: #eee; border:none; padding: 10px; cursor: pointer; } button[role="tab"][aria-selected="true"] { background-color: #ccc; }Once styled, it is essential to conduct extensive testing, especially with users with disabilities, to ensure that the tab system meets all accessibility requirements.
Conclusion
Implementing an accessible tab system is a significant step towards creating inclusive web applications. While this is a rough outline, remember that every detail counts when it comes to accessibility. You can always find more resources and assistance at my blog and don't hesitate contact me for additional help or clarification of doubts.
Investing time in making your content accessible is not only a legal obligation in many cases, but also a practice that reflects a commitment to all your users, expanding your potential audience and improving the overall user experience.
English 
Spanish