スクリーンリーダーがコンテンツをスキップする

Question

私はアクセシビリティに慣れていません - まだ勉強中です - この質問は非常に基本的なものかもしれません。 :)

私はサイトのアクセシビリティをテストするためにスクリーンリーダー（Chrome Vox）を使用しています。問題は、メニューを読んだ後、読者はすべてのコンテンツをスキップして、フッターに直接行くことです。

この現象の主な原因は何ですか？

Answer 1

私が質問に答える前に、テストのために適切なスクリーンリーダーを見ることを強くお勧めします。 ChromeVoxは高レベルのテストには適していますが、VoiceOver、JAWS、NVDA、ナレーター、Orcaと同じ機能を提供するわけではありません。

今すぐご質問ください。正の値を持つtabindexのインスタンスがあります。

スクリーンリーダーユーザーとキーボードユーザーに適用されるページをタブで移動すると、プラスのtabindex値を持つものは、ページ上の他のフォーカス可能なコンテンツの前にフォーカスされます。

<input name="fname" class="olark-form-input" id="olark-form-input-fname" placeholder="" tabindex="1" autocomplete="on" required="" data-reactid=".0.3.1.1.0.0:$fname.0" type="text"> 

<input name="email" class="olark-form-input" id="olark-form-input-email" placeholder="" tabindex="2" autocomplete="on" required="" data-reactid=".0.3.1.1.0.0:$email.0" type="email"> 

<input name="phone" class="olark-form-input" id="olark-form-input-phone" placeholder="" tabindex="3" autocomplete="on" required="" data-reactid=".0.3.1.1.0.0:$phone.0" type="tel"> 

<textarea class="olark-form-message-input" tabindex="4" name="body" id="olark-form-input-body" placeholder="Escreva sua mensagem." title="Escreva sua mensagem." required="" data-reactid=".0.3.1.1.0.0:$body.0.1" style="height: 26px !important;"></textarea> 

最も簡単な解決策は、それが値を追加しないと、一部のユーザーだけのためのページを複雑にして完全にtabindex値を削除することです。ここでは

は、それが発生した4つの場所です。ここで

は（ more detail in this postで） tabindexベストプラクティスに関するいくつかのヒントがあります：

tabindex="-1"

設定でtabindex = " - 1" は、スクリプトを使用して、要素のフォーカスを設定することができますが、それを入れていませんページのタブ順に表示します。これは、スクリプトを介して更新したものにフォーカスを移す必要がある場合や、ユーザーの操作の範囲外にある場合に便利です。

tabindex="0"

設定でtabindex = "0" の要素を取り、それがフォーカス可能になります。要素の位置をタブ順に設定するのではなく、DOMを使用してその位置によって決定された順序で要素をフォーカスすることができます。

tabindex="1"（または任意の値> 0）

は、タブインデックス= "1" またはゼロより大きい（または任意の正の値）任意の値を設定しないでください。