aria-hidden="true"はドキュメント<body>に存在してはなりません
修正方法
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"> が存在している場合、ドキュメントのコンテンツは支援技術に対してアクセシブルではありません。
仕組みについて (簡単に言うと)
ドキュメントの body 要素に aria-hidden="true" 属性が存在するかを確認し、それに応じて合格あるいは不合格のメッセージで警告します。
リソース
axe 4.10 ルールの一覧 を参照する
この情報は役に立ちましたか?
あなたの回答は次のとおりです。
フィードバックが提出された日付/時刻: