web-dev-qa-db-ja.com

タブマークアップのaria-controls属性を配置する場所

次の構文に従うスクリプトを使用して、ページにタブ付きコンテンツセクションを設定しています。

<!-- Clickable tab links -->
<ul class="js-tablist">
    <li id="tab1" class="js-tab active"><a href="#tabpanel1">Tab 1</a></li>
    <li id="tab2" class="js-tab"><a href="#tabpanel2">Tab 2</a></li>
    <li id="tab3" class="js-tab"><a href="#tabpanel3">Tab 3</a></li>
</ul>

<!-- Tab panels -->
<div id="tab-set" class="js-tabpanel-group">
    <section id="tabpanel1" class="js-tabpanel">__CONTENT__</section>
    <section id="tabpanel2" class="js-tabpanel">__CONTENT__</section>
    <section id="tabpanel3" class="js-tabpanel">__CONTENT__</section>
</div>

JavaScriptを介してこの構造マークアップにさまざまなARIAロール（role="tablist"、role="tab"、role="tabpanel"など）を設定します（スクリプトがない場合はタブがないため）が、 「aria-controls」属性をどこに配置すればよいかわからない。 <li>要素またはその<a>子要素のどちらに移動する必要がありますか？それとも関係ありませんか？実際、role="tab"とtabindex="0"について同じ質問をすることができます。これらはリストアイテムとアンカーのどちらに配置する必要がありますか？

htmltabsaccessibilitywai-aria
13
Rick Lecoat

aria-controlsを取得するアイテムにrole="tab"を置きます。

aria-controlsは、タブとそのパネルの間の関係を作成するものです。仕様のaria-controlsの説明の3番目の箇条書きを参照してください： https://www.w3.org/TR/wai-aria/states_and_properties#aria-controls

後続の質問に答えるには、role="tab"を<a href>に配置します。これは、キーボードフォーカスを受け取り、ブラウザでアクション可能になるようにすでに準備されているためです。これは、tabindexをまったく使用する必要がないことも意味します。

role="presentation"要素に<li>をスローし、role="tablist"に<ul>をスローすることも検討してください（特に<li>をrole="presentation"で不活性化するため）。

タブの役割を使用することにより、これらのタブはOSのタブのように動作し、タブ間を移動する矢印キーを尊重することをエキスパートユーザーに基本的に伝えるため、矢印キーナビゲーションも管理できるように準備してください。

チェックアウトする価値のある追加リソース：

この後、スクリーンリーダーでテストして、期待どおりに動作することを確認してください。

8
aardrian

このデモは ARIAでタブパネルを使用するスクリーンリーダー を示しています。 Jawsスクリーンリーダーは、aria-controls属性によって作成された関係に基づいて、タブから対応するタブパネルに移動するためのショートカットを提供します。

興味があれば、このデモは ARIAなしのタブパネルを使用したスクリーンリーダー を示しています。

タブパネルのセットを作成するとき、ウィジェットがキーボードの順序で単一のタブストップを表すようにします。誰かがタブキーを使用して一連のタブに移動すると、フォーカスは現在選択されているタブに移動し、次にタブキーを押すとフォーカスがコンテンツに戻ります。

ロービングtabindex を使用してこれを行うことができます。現在選択されているタブのみがフォーカス可能である必要があります。他のすべてのタブ（特に<a>それらを表す要素）tabindex = "-1"を設定する必要があります。これにより、キーボードのタブシーケンスに含まれなくなります。

誰かが左/右矢印キーを使用してタブを循環できるようにするスクリプトは、各タブのtabindex属性の値も更新する必要があります。これにより、現在選択されているタブ以外はすべて、tabindexが-1に設定されます。ここには 動作するタブパネルのデモ があります。

2
Léonie Watson