Luxeritas の関連記事を Accessible に

公開日

WordPress Luxeritas Theme の関連記事の機能。デフォルトで備わっていてとても便利ですね。
しかし、スクリーンリーダーで利用するととても不便。見出しでつまずいたりタイトルを全て「関連記事」としか読みません。
これをスクリーンリーダーでも快適に使える様に修正していきます。

aria-label は不要

関連記事は related.php を呼び出して出力している様です。
このファイルを直接編集するか子テーマにコピーして修正していきます。
ソースを見てみると


<h3><a href="<?php the_permalink(); ?>" aria-label="<?php echo ...省略; ?>"><?php the_title(); ?></a></h3>

の記述が見付かります。
「aria-label=””」に「echo」で関連記事のラベルを呼び出している様です。

作者さんの意図は良く分かりませんが、恐らくはラベルを付けるとスクリーンリーダーに付加情報として与えられると考えたのではないでしょうか。
しかし、「aria-label=”関連記事”」にしてしまうと上書きしてしまい、タイトルを全て「関連記事」としか読まなくなってしまいます。

ここは折角で申し訳ないですが「aria-label=”<?php echo …省略; ?>”」の部分を丸ごと削除します。ごめんなさい。
新着記事ウィジェットも同じ様にラベル付けしてあったので作者さんの勘違いなら修正されると良いんですけど。

関連記事見出しを修正

次は関連記事の見出しを修正していきます。
スクリーンリーダーの見出しジャンプ移動やスマホのフリックで移動した際に、見出しに置かれたアイコンフォントでつまずいて見出しを正しく読み上げてくれません。

これを解決する為に「single.php」にコードを追加します。


<h2 class="related"><i class="fa fas fa-th-list" aria-hidden="true"></i><?php echo ...省略; ?></h2>

アイコンフォントは読み上げる必要が無いので「aria-hidden=”true”」を挿入してスクリーンリーダーでは読み飛ばす様にします。

アイコンを削除するのが一番安定して動作すると思いますが、デザインを変える事無く対応するにはこの方法が良いのではないでしょうか。

スクリーンリーダーの PC-Talker 10 と Firefox 62 の組み合わせではこれでもつまずいて読み上げますが、IE との組み合わせでは正しく読み上げました。

PC-Talker は元々 IE しかサポートしていなかったのでまだ対応が追い付いていないのでしょう。ここはメーカーさんに頑張ってもらいましょう。
他のスクリーンリーダーの NVDA や iPhone の VoiceOver では問題無く動作します。

かなりマイナーな視点ですが、特にタイトルを読み上げないというのは何の記事かも分からず致命的なので、ウェブアクセシビリティの観点からも修正される事をおすすめします。