Responsive & Accessible jQuery Tabbed Interface Plugin

File Size: 13.8 KB
Views Total: 4808
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive & Accessible jQuery Tabbed Interface Plugin

Accessible Tabs is a simple yet robust jQuery tabs plugin used to create a fully responsive, customizable, accessible tabbed interface component with ARIA & keyboard support.


  • Easy to create a tabs UI from plain Html structures.
  • Keyboard shortcuts and combination keys supported.
  • Auto transform into a vertical accordion list on smaller screen devices.
  • “Fragment” detection.
  • Fully styleable via CSS.
  • WAI-ARIA Roles, States, and Properties.

Basic usage:

1. Load the jQuery Accessible Tabs plugin after jQuery library.

<script src="//"></script>
<script src="jquery-accessible-tabs.js"></script>

2. Build the Html structure for the tabs & tab panels.

<div class="tabs">
  <ul class="tabs__list row w100" data-hx="h2">
   <li class="tabs__item col 25">
    <a href="#id_first" id="label_id_first" class="tabs__link">1st tab</a>
   <li class="tabs__item col 25">
    <a href="#id_second" id="label_id_second" class="tabs__link">2nd tab</a>
   <li class="tabs__item col 25">
    <a href="#id_third" id="label_id_third" class="tabs__link">3rd tab</a>
   <li class="tabs__item col 25">
    <a href="#id_fourth" id="label_id_fourth" class="tabs__link">4th tab</a>
 <div id="id_first" class="tabs__tabcontent">
   here the content of 1st tab
 <div id="id_second" class="tabs__tabcontent">
   here the content of 2nd tab
 <div id="id_third" class="tabs__tabcontent">
   here the content of 3rd tab, with a select with an id="id_in_tab"
   <select name="fdsfdsf" id="id_in_tab">
    <option value=""></option>
    <option value="12">1241</option>
 <div id="id_fourth" class="tabs__tabcontent">
   here the content of 4th tab

3. Style the tabbed interface whatever you like.

.tabs__tabcontent[aria-hidden=true] { display: none; }

.tabs__link { text-decoration: none; }

.tabs__link[aria-selected="true"] { color: #f00; }

.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;

Change log:



  • Added data-tabs-disable-fragment option


  • Add feature data-selected="1" (tab selected by default)


  • Created a special version of the script 'jquery-accessible-nested-tabs.js' for nested tabs


  • JS update


  • Update plugin for disabled tabs


  • Fix bug when a tab system is in another one


  • Full refactoring of plugin

This awesome jQuery plugin is developed by nico3333fr. For more Advanced Usages, please check the demo page or visit the official website.