スクリーンリーダー用の非表示の目次

StackOverflow https://stackoverflow.com/questions/613203

  •  03-07-2019
  •  | 
  •  

質問

いくつかのサイトで、ページの上部にナビゲーションセクションがあり、ページの他の部分への内部リンクがあるため、スクリーンリーダーを持っているユーザーはすぐにコンテンツやメニューにジャンプできることがわかりました。 、フッターなど。この<！> quot; nav <！> quot;要素はCSSを使用して画面外に移動されるため、通常のユーザーには表示されません。

これを実装する最良の方法は何ですか？つまり、スクリーンリーダーにとって最もアクセスしやすく、邪魔にならないものは何ですか？ここで私が遊んでいるのは次のとおりです：

<div id="nav">
    <a href="#one">Jump to section one</a>
    <a href="#two">Jump to section two</a>
    <a href="#three">Jump to section three</a>
</div>

<!-- versus -->

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

最初のものは、マークアップがずっときれいになるという利点がありますが、厳密には意味論ではありません。また、<！> quot;セクション1にジャンプセクション2にジャンプセクション3にジャンプ<！> quot;のように表示されます。視覚的な外観は重要ではないことを知っています。なぜなら、それは隠されているからです。しかし、それは読み方に影響しますか？それぞれの間に適切な一時停止がありますか？

2番目は、構文がもう少し冗長ですが、できればより説明的です。

これらのうち、どちらが良いですか？さらに良い方法はありますか？

役に立ちましたか？

解決

Firefoxの Fangs というプラグインをダウンロードできます（実際のスクリーンリーダーを参照）ジョーズ）。ジョーズが読むテキストを生成します。とても便利です。リンクだけを次々に並べるセマンティックレイアウトを作成します。また、...のようなもので非表示にします。 

#nav {
    position: absolute;
    left: 0;
    top: -9999px

}

スクリーンリーダーによっては、display: none を使用して読み上げられない場合があります。

自分のサイトでは、通常これを実行しています：

<div id="section-nav">
    <p>Jump to</p>
    <ul>
       <li><a href="#section1">Section1</a></li>
    </ul>
</div>

他のヒント

スクリーンリーダーは通常、ハイパーリンクをそのようにアナウンスすることに注意してください。つまり、最初の例は<！> quot;として読み上げられません。セクション1にジャンプセクション2にジャンプセクション3にジャンプ<！> quot;むしろ<！> quot;リンク：セクション1にジャンプ、リンク：セクション2にジャンプ、リンク：セクション3にジャンプ<！> quot;またはそのようなもの。

（個人的には、2番目のセマンティックオプションを使用しますが、それは個人的な好みです。）

リンクを#navのid（またはクラス）で配置する必要があります。これにより、スクリーンリーダーを使用しているユーザーは、コンテンツがリンクのリストであることがわかります。<！> quot; これは、リンク、セクション1へのリンク、セクション2へのリンク'... <！> quot;

<！> quot; ul <！> quot;の配置<！> quot; div <！> quot; <！> quot; #nav <！> quot;のidを持つ機能しますが、divは<！> quot; ul <！> quot;をラップすること以外は何もしません。識別のため。 <！> quot; ul <！> quot;をIDにするだけできれいになります。 <！> quot; div <！> quot;はそのままにしておきます。でる。次のコードが最適です（私は思う）。清潔で要点まで。

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

cssを使用してページからテキストを削除するには、次を使用します。

ul#nav {
    position: absolute;
    left: -9999px
}

適切なセマンティックレイアウトでは、必要ありません。すでに使用しているナビゲーション要素にスクリーンリーダーとの互換性を持たせることができます。通常、2番目のオプションは、それを実現する方法です。リストアイテムのスタイルを設定して、現在実行していることと一致させることができます。

要求したことを行う最善の方法は、アンカーをその中に使用して<ul>を使用することです。

ただし、WebKitにはいくつかのバグがあり、実際にターゲット要素にフォーカスが移動しないため、フォーカスが移動するようにイベントハンドラーをリンクにアタッチする必要があります。これには、ターゲットがタブフォーカス対応である必要もあります（tabindex="-1"はこのために機能します）。

ただし、ページに適切な見出し構造がある場合、スクリーンリーダーユーザーは、作成しているこのナビゲーションメニューを必要とせずにページをナビゲートできます。実際、このメニューは、スクリーンリーダーを持たないキーボードのみのユーザーにとってより便利です。その場合、キーボードを使用しているユーザーがそれを見ることができるように、フォーカスに表示したいでしょう。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top