https://www.nakijin.jp/theme/base/js/aria_tab.js

1$(function(){
2
3  var $container = '.accessible-tabs';
4
5  // タブへrole、aria-controls、aria-selectedの追加
6  $($container +' .tab-nav').attr('role','tablist');
7  $($container +' [role="tablist"] li').attr('role','tab');
8  $('[role="tablist"] li').each(function() {
9    $(this).attr({
10      'aria-controls': $(this).children('a').attr('href').substring(1),
11      'aria-selected' : 'false'
12    });
13  });
14
15  // 初期表示の状態で選択されているタブのaria-selectedをtrueに変更
16  $('[role="tablist"] .hover').attr({
17    'aria-selected' : 'true'
18  });
19
20  //　コンテンツ側の要素へrole、aria-hiddenの追加
21  $($container +' .box').attr({
22    'role' : 'tabpanel'
23  });
24  $('[role="tabpanel"]').attr({
25    'aria-hidden' : 'false'
26  });
27
28  //　初期表示の状態で選択されているコンテンツaria-hiddenをfalseに変更
29  $('[role="tabpanel"].hide').attr({
30    'aria-hidden' : 'true'
31  });
32
33  //タブクリック時のWAI-ARIA切替
34  $('[role="tab"]').on('click', function(e) {
35
36    e.preventDefault();
37
38    // タブ側の切り替え
39    $(this).attr({'aria-selected' : 'true'});
40    $('[role="tab"]').not(this).attr({'aria-selected' : 'false'});
41
42    // コンテンツ側の切り替え
43    $($container +' [role="tabpanel"]').attr({'aria-hidden' : 'true'});
44
45    var $idName = $(this).children('a').attr('href');
46     
47    $($idName).attr({'aria-hidden' : 'false'});
48  });
49
50});