[aria-hidden="true"] 要素にフォーカス可能な子要素が含まれていますが出る時の対処法。【PSI】

“[aria-hidden="true"]要素にフォーカス可能な子要素が含まれています”の対処法

「PageSpeed Insights」の診断結果に、“[aria-hidden="true"] 要素にフォーカス可能な子要素が含まれています”という改善点が出たので対処しました。

当サイトをPageSpeed Insightsで診断した結果

[aria-hidden="true"] 要素にフォーカス可能な子要素が含まれています
フォーカス可能な子要素が [aria-hidden="true"] 要素内にある場合、スクリーン リーダーなどの支援技術を使用するユーザーはこれらの操作可能な要素を使用できません。

「ユーザー補助」の項目の改善点であるように、今回問題なのはスクリーンリーダーなどの支援技術への対応となります。

目の不自由な方がWebサイトを閲覧する際、スクリーンリーダー（支援技術）を快適に使えるようにするのが今回の目的です。

対処の前に、まず[aria-hidden="true"] とは何なのか？について触れておきます。

[aria-hidden="true"]要素とは？

「aria-hidden」要素は、スクリーンリーダーを使った際の音声読み上げをどうするかを指定するHTMLタグです。分かりやすく言うと、要素の中に

と記述していると、スクリーンリーダーでの読み上げがスキップされます。

特にFontAwesomeなどのWebアイコンをいちいち音声読み上げされると、ページの内容が分かりにくくなってしまうので、aria-hidden="true"を使ってWebアイコン（装飾や絵）の読み上げを無視してもらおう！...ということです。

今回はaria-hidden="true"がフォーカスできる要素に含まれているのが問題です。
フォーカスできる要素は基本スクリーンリーダーに読み上げられるべき内容なので、

というのが、今回PageSpeed Insightsで指摘されている内容です。

つまり指摘が出る要素は、読み上げをスキップするべき要素と、読み上げをスキップするべきではない要素が（同じ要素内に）混在してしまっている状態と言えます。

内容を整理したところで、対処方法に参りましょう・ｗ・

対処法：フォーカス可能な要素には「aria-hidden="true"」を使わない

“[aria-hidden="true"] 要素にフォーカス可能な子要素が含まれています”の対処方法は、PageSpeed Insightsの説明にあるリンク（↓）から確認できます。

OKな場合とNGな場合のサンプルHTMLが載っていますが、具体的な対処方法は以下の２つのパターンのどちらかになります。

この問題が出る要素は基本的にWebアイコンの部分になるかと思います。
その場合はアイコン部分だけを他の要素の外に出してあげるだけで解決できます。

どうしても要素内にaria-hidden="true"を使いたい時は、CSSの「display:none;」や「tabindex="-1"」などを使って、要素にフォーカスできなくしてあげればOKです。

指摘要素がWebアイコンの場合の対処法

この記事では、実際に当サイトで“[aria-hidden="true"] 要素にフォーカス可能な子要素が含まれています”を解決した時の内容をご紹介します。

改めてPageSpeed Insightsを確認してみると...

当サイトはWebアイコン（FontAwesome）部分が指摘対象

当サイトの場合は、記事上部のパンくずリスト部分に使っているWebアイコン（FontAwesome）部分に指摘が出ていました。

問題となるHTML部分を抜粋すると以下のような感じです。

<ol itemscope itemtype="http://～" class="fa fa-folder-open-o" aria-hidden="true">
<li itemprop="itemListElement" itemscope itemtype="http://～">
    <a href="<?php echo home_url(); ?>" itemprop="item">

１行目のolタグの中にWebアイコン用のaria-hidden="true"が入っています。
olタグの中身はリンクになっており、これがフォーカス可能な要素のため指摘されているわけです。フォーカスできるのに読み上げスキップするな！...とね。

ということで、問題のWebアイコン部分を別の要素として外に出してあげます。

<i class="fa fa-folder-open-o" aria-hidden="true"></i>
<ol itemscope itemtype="http://～">
<li itemprop="itemListElement" itemscope itemtype="http://～">
    <a href="<?php echo home_url(); ?>" itemprop="item">

こんな感じにaria-hidden="true"が入った要素を独立させて１つに分ければOK！

これをChromeのデベロッパーツールで確認するとこんな感じ。
aria-hidden="true"が含まれるWebアイコン部分と、パンくずリストのリンク部分が別々になりました！（対処前はolタグ内で１つの要素になっていた）

PageSpeed Insightsに合格するか確認

最後に動作確認です。

[aria-hidden="true"] 要素にフォーカス可能な子要素は含まれていません

OKですね！

このように対処法は比較的簡単で、フォーカスできる要素内にaria-hidden="true"を使わないようにすればOKです。先述した通り、要素自体をフォーカスできないようにすることでも同じく対処できます。

ただ、問題のHTML部分を出力しているファイルが編集できない方には難しいかも...。
こればかりはサイト環境（WPの場合はテーマ）によって異なるので解説不可です...

まとめ

以上、PageSpeed Insightsで“[aria-hidden="true"] 要素にフォーカス可能な子要素が含まれています”という指摘が出る時の対処法でした。

フォーカスできる要素に[aria-hidden="true"]を使ってスクリーンリーダーの読み上げをスキップしていると怒られます。要素に視覚的な変化はありませんが、支援技術を使ったときのユーザービリティを向上させるために可能なら対応しておきましょう！

今回出てきたaria-hidden属性については別の記事（↓）で詳しく解説しています。
FontAwesome4ではベタ書きですが、FontAwesome5では自動付与になっています。

aria-hidden属性とスクリーンリーダーの関係が気になる方は、ぜひ関連記事もご覧いただければと思います。ではではこのへんで・ｗ・