やらねば.com

Luxeritas のアイコンフォントをアクセシブルにする

WordPress Luxeritas Theme ではデフォルトのデザインにもアイコンフォントが使用されています。
多くのサイトでも採用されていますが、そのまま利用すると音声読み上げソフトのスクリーンリーダーではアイコンの示している意味が理解出来ない、またはデザインのみに利用されているにも関わらず読み上げようとしてその要素で立ち止まってしまうという事が有ります。
そこで、Luxeritas Theme のアイコンフォントをスクリーンリーダーでも快適に読める様に修正して行きます。

アイコンフォントを修正するファイル

今回アイコンフォントを修正する箇所はパンくずリストと META 情報の2箇所。
親テーマの「breadcrumb.php」と「meta.php」を子テーマにコピーして手直ししていきます。

breadcrumb.php の編集

パンくずリストのアイコンフォントはデザイン上の理由が強いので、それ自体に意味を持たせて読ませる必要が無い為、スクリーンリーダーでは読み飛ばす様にします。

breadcrumb.php ファイルを編集


<li aria-current="page"><i class="fa fas fa-home" aria-hidden="true"></i> ...
<i class="arrow" aria-hidden="true">&gt;</i></li>

上記はフロントページの一部抜粋ですが、全てのページで「<i class="xxxx">」の要素に「aria-hidden="true"」を挿入してアイコンフォントをスクリーンリーダーでは読み飛ばす様にします。
「&gt;」は階層を示す「>」の部分ですが、こちらもスクリーンリーダーでは上手く読めない事が多いので読ませない様にしています。

<li>に挿入した「aria-current="page"」は、スクリーンリーダーで現在のページ位置を案内するもので、ホームに指定すると「ホーム」と読み上げるのに追加して「現在のページ」等と補足して案内します。
aria-current 属性の動作検証

meta.php の編集

META 情報のアイコンフォントは読み飛ばしてもそこまで混乱する事は無いと思いますが、ただ日付を読み上げてもそれが公開日なのか更新日時なのかといった事が分からないので、補足情報を付け加えます。

meta.php ファイルを編集


$meta .= '<i class="' . $far . $fa_clock . '" aria-hidden="true"></i>
<span class="sr-only">公開日</span>';
$meta .= '<i class="fa fas ' . $fa_repeat . '" aria-hidden="true"></i>
<span class="sr-only">更新日</span>';

上記は meta.php の一部抜粋ですが、1度アイコンフォントを「aria-hidden="true"」で読み飛ばして、「sr-only」クラスを使って隠しテキストで補足説明をしています。

この「sr-only」クラスは Bootstrap で使われている CSS クラスで、読み込まれている CSS コードの中身は


.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  border: 0
}

となっているので、上記コードを子テーマのスタイルシートに貼り付ければ使う事が出来ます。

もしくは、WordPress で出力されるクラス「.screen-reader-text」を利用しても同様の結果が得られます。
出力されている CSS は


.screen-reader-text{
  clip: rect(1px,1px,1px,1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px
}

となっています。

後は出力している META を「aria-hidden="true"」で読み飛ばして、クラス「sr-only」又は「screen-reader-text」で読ませたいテキストを追加すれば完成です。