wai aria - Bootstrap 3 Tabs - Accessability -

are bootstrap 3 tabs not accessible according wai ?

i found wai-aria specification tabs keyboard behavior:

• https://www.w3.org/tr/wai-aria-practices-1.1/examples/tabs/tabs.html
• https://www.w3.org/tr/wai-aria-practices/#tabpanel

which says:

when focus on tab element in horizontal tab list: left arrow: moves focus previous tab. if focus on first tab, moves focus last tab. optionally, activates newly focused tab (see note below). right arrow: moves focus next tab. if focus on last tab element, moves focus first tab. optionally, activates newly focused tab (see note below).

as seems bootstrap 3 tabs documentation samples fail meet requirements. pressing left , right arrow keys, have no effect ever.

<ul class="nav nav-tabs">   <li role="presentation" class="active"><a href="#">home</a></li>   <li role="presentation"><a href="#">profile</a></li>   <li role="presentation"><a href="#">messages</a></li> </ul> 

do have implement behavior myself ? or missing magic attribute\class hard work me ?

as there no official support of wai-arai in bootstrap 3. mentioned @zimsystem done using role="tablist", role="tab" etc..

solution js using attributes role="tablist", role="tab", try this:

check demo here

html:

<div class="container">    <h2>bootstrap 3 tabs - accessability</h2></div>  <div id="extab2" class="container">   <ul class="nav nav-tabs">     <li class="active">       <a href="#1" data-toggle="tab">overview</a>     </li>     <li><a href="#2" data-toggle="tab">without clearfix</a>     </li>     <li><a href="#3" data-toggle="tab">solution</a>     </li>   </ul>    <div class="tab-content ">     <div class="tab-pane active" id="1">       <h3>standard tab panel created on bootstrap using nav-tabs</h3>     </div>     <div class="tab-pane" id="2">       <h3>notice gap between content , tab after applying background color</h3>     </div>     <div class="tab-pane" id="3">       <h3>add clearfix tab-content (see css)</h3>     </div>   </div> </div> 

js:

$(function() {   var tabs = $("#extab2");    // each individual tab div, set class , aria role attributes, , hide   $(tabs).find(".tab-content > div.tab-pane").attr({     "class": "tabpanel",     "role": "tabpanel",     "aria-hidden": "true"   }).hide();    // list of tab links   var tabslist = tabs.find("ul:first").attr({         "role": "tablist"   });    // each item in tabs list...   $(tabslist).find("li > a").each(     function(a) {       var tab = $(this);        // create unique id using tab link's href       var tabid = "tab-" + tab.attr("href").slice(1);        // assign tab id, aria , tabindex attributes tab control, not remove href       tab.attr({         "id": tabid,         "role": "tab",         "aria-selected": "false",         "tabindex": "-1"       }).parent().attr("role", "presentation");        // assign aria attribute relevant tab panel       $(tabs).find(".tabpanel").eq(a).attr("aria-labelledby", tabid);        // set click event each tab link       tab.click(         function(e) {           // prevent default click event           e.preventdefault();            // change state of selected tablist item           $(tabslist).find("> li.active").removeclass("active").find("> a").attr({             "aria-selected": "false",             "tabindex": "-1"           });            // hide selected tabpanel           $(tabs).find(".tabpanel:visible").attr("aria-hidden", "true").hide();            // show newly selected tabpanel           $(tabs).find(".tabpanel").eq(tab.parent().index()).attr("aria-hidden", "false").show();            // set state of newly selected tab list item           tab.attr({             "aria-selected": "true",             "tabindex": "0"           }).parent().addclass("active");           tab.focus();         }       );     }   );    // set keydown events on tablist item navigating tabs   $(tabslist).delegate("a", "keydown",     function(e) {       var tab = $(this);       switch (e.which) {         case 37:           //case 38:           if (tab.parent().prev().length != 0) {             tab.parent().prev().find("> a").click();           } else {             $(tabslist).find("li:last > a").click();           }           break;         case 39:           //case 40:           if (tab.parent().next().length != 0) {             tab.parent().next().find("> a").click();           } else {             $(tabslist).find("li:first > a").click();           }           break;       }     }   );    // show first tabpanel   $(tabs).find(".tabpanel:first").attr("aria-hidden", "false").show();    // set state first tabslist li   $(tabslist).find("li:first").addclass("active").find(" > a").attr({     "aria-selected": "true",     "tabindex": "0"   }); });