は、私は次の構文を次のスクリプトを使用して、私のページでタブ付きコンテンツセクション設定してい私のタブのマークアップ

Question

に属性：

<!-- 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> 

を私は様々なARIAのロールを設定します（なぜなら、スクリプトがない場合はタブがないためです）しかし、私はどこで私の 'aria-controls'属性を配置するのかは確信しています。彼らは<li>要素またはその<a>子要素に進む必要がありますか？それとも問題じゃないの？実際、同じ質問がrole="tab"とtabindex="0"について聞かれることがあります - これらのことがリスト項目またはアンカーに行くのであれば？

Answer 1

role="tab"を取得する項目にaria-controlsを入れてください。

aria-controlsは、タブとそのパネルの関係を作成するものです。スペックからaria-controlsの説明では第三弾を参照してください：それはすでにブラウザでキーボードフォーカスを受け取ると、実用的なことを準備されるので、https://www.w3.org/TR/wai-aria/states_and_properties#aria-controls

あなたの後続の質問に答えるために、<a href>にrole="tab"を置きます。つまり、tabindexをまったく使用する必要はありません。

も（あなたがrole="presentation"で<li>不活性レンダリング、特に以来）<ul>に<li>要素とrole="tablist"にrole="presentation"を投げて考えてみましょう。

また、タブの役割を使用することで、これらのタブはタブ内でタブのように動作することをエキスパートユーザーに伝えています。チェックアウトする価値

追加リソース：

• https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/（Mozillaので、アクセシビリティ上で動作し、スクリーンリーダーの利用者である男から）
• http://heydonworks.com/practical_aria_examples/#tab-interface（アクセシビリティコンサルティングおよび修復を行い男から）

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

Answer 2

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

このデモでは、好奇心が強い場合はscreen reader using tabpanels without ARIAと表示されます。

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

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

誰かが左右の矢印キーを使用してタブを循環することを可能にするスクリプトは、現在選択されているタブを除くすべてがtabindexを-1に設定するように、各タブのtabindex属性の値も更新する必要があります。ここにworking tabpanels demoがあります。