テストページに関する注意
このページには、テストおよびデモのために意図的にアクセシビリティ上の問題を含む実装例が含まれています。
これらの例を本番サイトで使用しないでください。アクセシビリティのガイドラインやベストプラクティスに反します。
このページは Accessibility Visualizer 拡張機能と併用することで、開発者がアクセシビリティの問題を発見・理解するのを支援する目的で作られています。
ARIA hidden
aria-hidden 属性は要素を支援技術に公開するかどうかを制御します。適切に使えば装飾的な内容を隠せますが、誤用すると重要な情報がアクセス不能になります。
可視コンテンツ
aria-hidden="false" の可視テキスト
可視かつ支援技術に公開されるテキスト。要素は公開されているのがデフォルトで、 aria-hidden 属性を指定する必要はありません。
このテキストは視覚的に見えていて、スクリーンリーダーでも読むことができます。
aria-hidden="true" の可視テキスト
❌ 視覚的には見えるのに支援技術からはアクセスできません。スクリーンリーダー利用者には内容が伝わりません。
アイコン
aria-hidden="true" の装飾アイコン
✅ 重要な情報を伝えない装飾アイコンに aria-hidden を使う適切な例。アイコンは隠され、テキストは引き続きアクセス可能です。
aria-hidden を付けない重要なアイコン
❌ アイコンで表現された情報が、支援技術向けに伝わる状態になっていません。
未記入の項目があります
適切にラベル付けされたアイコン
✅ aria-label で意味を提供する例。視覚的にはアイコンで、支援技術へは aria-label で情報を伝えます。
未記入の項目があります