見出し画像

Links do not have a discernible nameをFilter Hookで解決

弊所Website (https://www.tm106.jp)の引きずっていた問題は、Lighthouse Auditのaccessibilityの問題で、メニューでsocial networkのiconを表示していることから、そのアンカータグには、テキストがなく、altのテキストもないため、Links do not have a discernible nameのところで、減点(−2)がありました。時々Lighthouse側がその問題を無視して減点がないこともありますが、Cacheなどからもその内容が安定して表示される場合では、やはりマイナス2が常態化してました。

Dashiconのリンクにテキストがないのは、不思議でもなく、軽微な減点だろうと放置してましたが、filter hookでaria-labelを追加することをトライしました。追加したのは次のadd filterです。

/*aria-lable追加*/
function add_aria_label_to_all_menu_anchors( $atts ) {
$atts['aria-label'] = 'My-Navi-label';
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_aria_label_to_all_menu_anchors', 10 );

これをfunction.phpに追加してaccessibilityの問題はなくなり、accessibilityの満点が定常化しています。全部のアンカーにaria-lableを追加するのは多すぎるような気もしますが、そこは大目に見ています。

画像1

PerformanceもSpeed Indexが弱くて0.9ぐらいになるとスコアが98か99止まりでしたが、CacheのメインplugをSwift Performance Liteに代えて、設定を調整して、100が出せるようになってきています。またNavigationのplugを廃止してfunction.phpとindex.phpに書き込むことでもわずかな時間節約になっているようにも思います。


この記事が気に入ったらサポートをしてみませんか?