入れ子になった aria-hidden

Silktide は、非表示としてマークされたコンテナ内で、に対して表示としてマークされたコンテンツをチェックします。非表示の指定が優先されるため、内側の指定は効果がなく、コンテンツは非表示のままになります。

<!-- 問題: aria-hidden="false" であるにもかかわらず、段落は非表示のままになる -->
<div aria-hidden="true">
  <p aria-hidden="false">重要なコンテンツ</p>
</div>

これが重要な理由

要素に aria-hidden="true" が指定されている場合、その要素内のすべてがから除外されます。標準には、子孫要素が再び表示対象になる方法はありません。非表示のコンテナ内にある aria-hidden="false" は何の効果もありません。このパターンを使用する作成者は、内側のコンテンツを再び公開できたと考えてしまいます。その結果、目の見えるユーザーには見える一方で、のユーザーはアクセスできないコンテンツが生じますが、その違いに誰も気づかない可能性があります。

修正方法

表示対象にするコンテンツが非表示のコンテナ内に入らないようにマークアップを再構成し、子孫要素ではなく兄弟要素になるよう外に移動します。
コンテナ内のすべてを実際に利用可能にする必要がある場合は、祖先要素から aria-hidden="true" を削除します。
祖先要素の非表示状態を取り消すために aria-hidden="false" に依存しないでください。修正後は、通常、内側の属性も削除できます。

Silktide によるチェック方法

ページ上で aria-hidden="false" が指定されているすべての要素を見つけます。
その祖先要素をたどり、aria-hidden="true" が指定された要素を探します。
aria-hidden="false" が非表示の祖先要素内に閉じ込められている各要素を報告します。

トラブルシューティング

スクリプトによって祖先要素の aria-hidden が切り替わる

Silktide は、ページの読み込み時にチェックします。スクリプトによって削除される前の一時的な間だけ非表示状態が存在する場合、検出結果にはその初期状態が反映されます。ただし、低速な接続を利用している支援技術ユーザーもその状態を体験することがあり、その間は入れ子になった aria-hidden="false" も何の効果もないことに注意してください。

検出結果があるはずなのに、このチェックで何も報告されない

ARIA のテストはウェブサイトごとに無効にできます。ウェブサイトの詳細設定を確認してください。