スクリーン リーダーなどのユーザー補助技術に提供する情報は、ページ内の関連性の高い部分のみにしてください。たとえば、画面に表示されないコンテンツは、支援技術から隠す必要があります。
手動テストの方法
画面外コンテンツが非表示になっていることを確認するには、スクリーン リーダーでテストします。
- Mac ユーザーの場合は、VoiceOver の使用に関するこちらの動画をご覧ください。
- パソコンをご利用の場合は、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>
画面外コンテンツの可視性を正しく設定するもご覧ください。