ページの関連部分のみがスクリーン リーダーなどの支援技術に公開されるようにします。たとえば、画面外にあるコンテンツや単なる見かけのコンテンツは、支援技術から隠す必要があります。
手動でのテスト方法
画面外のコンテンツが非表示になっていることを確認するには、スクリーン リーダーを使用して手動でそのコンテンツをテストする必要があります。- Mac をご利用の場合は、VoiceOver の使用に関するこちらの動画をご覧ください。- PC ユーザーの場合は、NVDA の使用に関するこちらの動画をご覧ください。- Chromebook ユーザーの場合は、組み込みのスクリーン リーダー ChromeVox をご覧ください。
ページ間を移動するには、TAB キーを使用します。
スクリーン リーダーは非表示コンテンツを読み上げないようにする必要があります。
修正方法
画面外のコンテンツを非表示にするには、そのコンテンツを含む要素を display: none または visibility: hidden に設定して、タブオーダーから削除します。
例:
.remove-me {
visibility: hidden;
}
<button class="remove-me">Can't reach me with the TAB key!</button>
画面外のコンテンツの表示を正しく設定するもご覧ください。