aria-hidden="true" は文書本体に存在してはならない
Start building more accessible experiences
Compliance Data & Impact
Disabilities Affected
- 盲目
Standard(s)
- WCAG 2.1 (A)
- WCAG 2.0 (A)
- WCAG 2.2 (A)
- EN 301 549
WCAG 達成基準 [WCAG 2.1 (A)]
- 1.3.1: Info and Relationships
- 4.1.2: Name, Role, Value
WCAG 達成基準 [WCAG 2.0 (A)]
- 1.3.1: Info and Relationships
- 4.1.2: Name, Role, Value
WCAG 達成基準 [WCAG 2.2 (A)]
- 1.3.1: Info and Relationships
- 4.1.2: Name, Role, Value
EN 301 549 指南
- 9.4.1.2: Name, Role, Value
修正方法
ドキュメント要素から aria-hidden="true" 属性を body 削除します。
注意：
aria-hidden="false" CSSの display: none、 visibility: hidden 、HTML5のhidden属性など、これまであらゆるモードでレンダリングを妨げてきたスタイルや属性と組み合わせて使用すると、動作に一貫性がなくなることが知られています。このアプローチに頼る前に、注意して徹底的にテストしてください。
非表示のコンテンツの場所を再検討して、 body 要素以外のページの領域に再配置できるかどうかを判断します。通常、スクリーン リーダーのユーザーがスキップする傾向のある不要な情報 (冗長または無関係なコンテンツ) を減らすために、コンテンツはスクリーン リーダーから非表示になります。
なぜ重要なのか
<body aria-hidden="true"の場合、コンテンツは支援技術ではアクセスできません。
aria-hidden="true" それ以外のアクセス可能なオブジェクトに適用: Webページは完全にアクセス可能であるように設計されており、要素が aria-hidden="true" 属性値を含まない場合にはアクセス可能になります。スクリーン リーダーは、 aria-hidden="true" 属性値でマークされたコンテンツを読み取りません。ユーザーは非表示のオブジェクト内のフォーカス可能な要素にタブで移動できますが、スクリーン リーダーはその内容を読み上げません。
非アクティブなダイアログ、折りたたまれたメニューなど、ユーザーに対して意図的に非表示にされているコンテンツやインターフェース要素は、スクリーン リーダー ユーザーに対しても非表示にする必要があります。ボタンをアクティブにしたりメニュー項目を展開したりするなど、視覚に障害のないユーザーが項目を利用できる場合、同じ項目がスクリーン リーダー ユーザーにも利用可能である必要があります。目標は、スクリーン リーダーのユーザーに、視覚のあるユーザーと同等のユーザー エクスペリエンスを提供することです。目の見えるユーザーに対してコンテンツを非表示にするやむを得ない理由がある場合、通常、目の見えないユーザーに対してもそのコンテンツを非表示にするやむを得ない理由があります。さらに、コンテンツを目の見えるユーザーに提供する際には、目の見えないユーザーにも提供できるようにすることが理にかなっています。
ルールの説明
<body aria-hidden="true">次の場合、ドキュメントのコンテンツは支援技術ではアクセスできません。
仕組みについて (簡単に言うと)
ドキュメントの aria-hidden="true" 要素の body 属性の存在を確認し、それに応じて合格または不合格のメッセージで警告します。
リソース
axe 4.10 ルールの一覧 を参照する
この情報は役に立ちましたか?
あなたの回答は次のとおりです。
フィードバックが提出された日付/時刻: