タブとして読み上げ可能なタブウィジェットの解説

タブとして読み上げ可能なタブウィジェットの解説

　次に、先ほど紹介したサンプルをWAI-ARIAに対応させて、「タブ」として正しく読み上げできるようにしていきます。まずはじめに、図2を確認してください。このサンプルでは、「野菜、タブ」などと読み上げられるようになっています。

　では変更点を解説していきましょう。

　まず、

に、「tablist」ロールを設定しています。




　後述する「tab」ロールをもつ要素は、必ず親要素として、「tablist」ロールをもつ要素を要求するため、この記述を追加する必要があります（参考：tablistの解説（http://www.hitachi.co.jp/universaldesign/wai-aria/ED_20080514/#tablist））。

　次に、
• 、に「presentation」ロールを設定しています。
  
  
• 
  …略…
  


　「presentation」ロールを指定することで、その要素が機能的、構造的、またインタラクション的な意味をもたないことを、支援技術に対して明示することができます（参考：presentationの解説（http://www.w3.org/TR/wai-aria-practices/#kbd_layout_impact_mode_css））。

　
• タグに「presentation」ロールを指定すると、JAWSは、「リスト」と読み上げなくなります。タグはまだ読み上げられてしまいます。
  
  　次に、タグに「tab」ロールを設定しています。
  
  野菜
  
  　これにより、「野菜、タブ」と読み上げるようになります。
  
  　また、タグには前回（http://www.thinkit.co.jp/article/133/3/）に説明した「tabindex="-1"」が指定されています。これは、下記のコードのように、タブ選択時（UI／Tabsのtabsselectイベント発生時（http://docs.jquery.com/UI/Tabs#Events））に選択されたタブにフォーカスをうつすために必要です。
  
  $('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
  $(ui.tab).find('span').focus();
  });
  
  　このようにすることで、タブをクリックして選択しても、フォーカスがに移るため、タグの「ページ内リンク」の読み上げがされなくなります。
  
  　タグ内コンテンツには「tabpanel」ロールを指定します。
  
  
  aria-labelledby="vegetable_tab">
  野菜のコンテンツ