🦍
アクセシブルなタブのメモ
参考
このページを見て自分にわかりやすく書いたものです。
html
- タブを囲む要素には
role="tablist"がある - タブパネル（タブボタンに関連付けられたコンテンツを含む要素）に
role="tabpanel"を付ける- 囲む要素ではなくタブパネルそのものにつける
- タブに見出しがある場合、見出しの
idとrole="tablist"がついている要素のaria-labelledbyは同じになる - タブには
role=tabを付ける - タブには
aria-controls要素を付ける- 対応するタブパネルの要素にはタブの
aria-controlsと同じ値のidがついている
- 対応するタブパネルの要素にはタブの
- アクティブなタブには
aria-selected="true"、それ以外にはaria-selected="false" -
role="tabpanel"を持つ要素にはaria-labelledby属性がある-
aria-labelledbyの値は、タブのidと同じ
-
- タブ要素にポップアップ メニューがある場合は、プロパティ
aria-haspopupがmenuまたはtrueに設定されます。 - タブリストが垂直の場合、
aria-orientation="vertical"をつける。- タブリストの
aria-orientationのデフォルト値はhorizontal。
- タブリストの
- タブパネルには
tabindex="0"を設定しないとフォーカスされない
※下のhtmlはExample of Tabs with Automatic Activation | APG | WAI | W3Cからの引用です。
<div class="tabs">
<h3 id="tablist-1">Danish Composers</h3>
<div role="tablist" aria-labelledby="tablist-1" class="automatic">
<button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">
<span class="focus">Maria Ahlefeldt</span>
</button>
...
</div>
<div id="tabpanel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
<p>Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was a Danish, (originally German), composer.
She is known as the first female composer in Denmark.</p>
</div>
...
</div><!-- / .tabs -->
キーボード操作時の動き
Tabキー
- フォーカスがタブリストに移動すると、アクティブなタブ要素にフォーカスがあたる
- タブリストにフォーカスがある場合、タブパネル内の意味のあるコンテンツを含む最初の要素がフォーカス可能でない限り、タブリストの外側のタブパネルにフォーカスを移動
矢印キー
水平タブリストのタブ要素にフォーカスがある場合
- 左矢印キー：フォーカスが前のタブに移動。最初のタブにフォーカスがある場合、最後のタブに移動
- 右矢印キー：フォーカスを次のタブに移動。最後のタブにフォーカスがある場合、最初のタブに移動
垂直タブリストのタブ要素にフォーカスがある場合
※タブリストが垂直の場合、タブリストにaria-orientation="vertical"が設定されている
- 上矢印キー：水平の場合の左矢印キーと同じ
- 下矢印キー：水平の場合の右矢印キーと同じ
MDN Web Docs
気になる動画
Discussion