4

スクリーン リーダーを使用しているユーザーがコンテンツ、メニュー、フッター、この「nav」要素は 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>

1 つ目は、マークアップがより明確になるという利点がありますが、正確にはセマンティックではありません。また、「セクション 1 にジャンプ セクション 2 にジャンプ セクション 3 にジャンプ」のように表示されます。見た目は隠されているので重要ではないことはわかっていますが、読み上げ方に影響はありますか? それぞれの間に適切な一時停止がありますか?

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

これらのうちどれがより良いですか、またより良い方法はありますか?

4

5 に答える 5

3

Fangsと呼ばれる Firefox 用のプラグインをダウンロードできます(実際のスクリーン リーダー Jaws を参照)。ジョーズが読むテキストを生成します。とても便利です。私なら、リンクを 1 つずつ順番に配置するだけで、適切なセマンティック レイアウトを使用します。私もそれを隠します...のようなもの

#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>
于 2009-03-05T01:57:23.397 に答える
2

通常、スクリーン リーダーはハイパーリンクをそのように読み上げることに注意してください。つまり、最初の例は「セクション 1 にジャンプ セクション 2 にジャンプ セクション 3 にジャンプ」ではなく、「リンク: セクション 1 にジャンプ、リンク: セクション 2 にジャンプ、リンク: セクションにジャンプ」と読み上げられることを意味します。 3」またはそのようなもの。

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

于 2009-03-05T01:02:20.470 に答える
0

あなたが要求したことを行うための最良の方法は<ul>、アンカーを内部に使用することです。

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

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

于 2014-03-03T22:02:55.210 に答える
0

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

于 2009-03-05T01:06:25.857 に答える