Luxeritas のアイコンフォントを Accessible に

公開日2018年10月1日更新日

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”」は、スクリーンリーダーで現在のページ位置を案内するもので、ホームに指定すると「ホーム」と読み上げるのに追加して「現在のページ」等と補足して案内します。
<span>要素には追加しても動作しませんでした。また、「aria-current」はスクリーンリーダーによっても対応にまだばらつきが有ります。

フリーソフトの NVDA と Firefox の組み合わせは上手く動作しました。
PC-Talker 10 は Internet Explorer 11 では動作しますが Firefox 62 では動作しませんでした。
iOS 12.0 VoiceOver は a 要素では動作しました。

aria 属性は a 要素やボタン等では動作し易いのですが、テキストのみのリスト等はどうすれば良いのでしょう。その内対応します。きっと…

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 クラスで、Luxeritas 設定の CSS の読み込みを「Luxeritas Mode」にしていると読み込まれません。
ただし、読み込まれている 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}

となっているので、「Luxeritas Mode」のままでも上記コードを子テーマのスタイルシートに貼り付ければ使う事が出来ます。
後は出力している META を「aria-hidden=”true”」で隠して「.sr-only」で読ませたいテキストを追加すれば完成です。

Bootstrap でもサポートされている様に代表的な手法なんでしょうけど、個人的には余りシンプルな方法とは思えません。自分で書いておいて何ですけど。
隠すこと無く、「aria-label」でラベル付けした方がシンプルで分かり易いと思ったのですが、そういった仕様なのかまだ対応が追い付かないのか、使える要素が少なく、スクリーンリーダーやブラウザによって挙動がかなり違うので、まだ実用的では無さそうです。
しかし着実に支援技術は進歩してますし、何より思うように動作してくれると楽しいものです。NVDA 等のフリーのスクリーンリーダーもあるので挙動の確認にも利用してみて下さい。