Accessible Tabs Demo

Manual Activation Tablist

role="tablist" is used on the parent wrapper.
It groups all tabs and informs assistive tech.

Automatic Activation Tablist

role="tablist" is used on the parent wrapper.
It groups all tabs and informs assistive tech.

HTML Code Structure


<div role="tablist" aria-label="Sample Tabs">
<button role="tab" aria-selected="true" aria-controls="tabpanel_1" tabindex="0">First Tab</button>
<button role="tab" aria-selected="false" aria-controls="tabpanel_2" tabindex="-1">Second Tab</button>
<button role="tab" aria-selected="false" aria-controls="tabpanel_3" tabindex="-1">Third Tab</button>
<button role="tab" aria-selected="false" aria-controls="tabpanel_4" tabindex="-1">Fourth Tab</button>
</div>

<div role="tabpanel" id="tabpanel_1" aria-labelledby="tab_1">Content for the first tab</div>
<div role="tabpanel" id="tabpanel_2" hidden>Content for the second tab</div>
<div role="tabpanel" id="tabpanel_3" hidden>Content for the third tab</div>
<div role="tabpanel" id="tabpanel_4" hidden>Content for the fourth tab</div>

Alternative List Structure for Tabs


<ul role="tablist" aria-label="Sample Tabs">

 <li role="presentation">
    <button role="tab" aria-selected="true" aria-controls="tabpanel_1" tabindex="0">First Tab</button>
  </li> 

  <li role="presentation"> 
    <button role="tab" aria-selected="false" aria-controls="tabpanel_2" tabindex="-1">Second Tab</button>
  </li> 

  <li role="presentation">
    <button role="tab" aria-selected="false" aria-controls="tabpanel_3" tabindex="-1">Third Tab</button> 
   </li>

    <li role="presentation"> 
        <button role="tab" aria-selected="false" aria-controls="tabpanel_4" tabindex="-1">Fourth Tab</button>
    </li> 

</ul>

How We Created These Tabs Using JavaScript (In Simple Words)

🔹 1. First, we select all tab buttons using JavaScript

This helps us detect which tab the user is interacting with.

🔹 2. Then we listen for user actions

We handle two types of actions:

Click → when the user taps or clicks on a tab
Keyboard keys → Arrow Left, Arrow Right, Enter, Space

🔹 3. For Manual Tabs

Arrow keys only move focus between tabs
Content changes only when user presses Enter, Space, or clicks the tab

JavaScript waits for the user to "activate" the tab.

🔹 4. For Automatic Tabs

When user presses Left or Right arrow keys:

The tab changes instantly
The active panel updates
ARIA attributes update immediately

🔹 5. JavaScript shows one panel and hides others

Sets aria-selected="true"
Sets tabindex="0"
Removes hidden from the active panel
Adds hidden to all other panels

In One Line

Manual tabs give more control → Automatic tabs react instantly.