Lighthouse | aria-label属性を活用する

2021-06-03Lighthouse,SEO

Lighthouse | aria-label属性を活用する

google ChromeのSEOチェック拡張機能「Lighthouse」で検出された問題点を確認して解決していきます。

今回はAccessibility(アクセシビリティ)カテゴリにあるNames and labels項目で診断された問題点を修正する方法です。

Links do not have a discernible nameとは

Links do not have a discernible name

直訳すると以下になります。

リンクには識別可能な名前がありません。

この診断はリンク全てが対象ではなく、リンクのアンカーテキストがリンクの挙動を現せれてていないものを対象になっていると思われます。

例えば、「こちら」「もっと読む」「記号のみ」などのリンクにaria-label属性が付与されていないと検出される可能性があります。

もともと、「こちら」「もっと読む」「記号のみ」などのリンクはSEOとしてはあまり良くないアンカーテキストになるとされているので注意しておきます。

問題を解決する方法

リンクのアンカーテキストを変更するか、aria-label属性を付ける事でこの問題を解決する事ができます。

aria-label属性はリンク先の説明文みたいなものです。

<a href="next.html" aria-label="次ページへ">▶</a>

title属性ではダメなのかな、と思いますが確かにちょっと用途が違う気がしますね。title属性を含めるならこういう形になります。

<a href="next.html" aria-label="次ページへ" title="記事タイトル">▶</a>

簡単に解決できる部分なのでSEOを意識するのであれば、リンク元ページからリンク先ページにもプラスに働く項目だと思いますので極力修正していくべき部分だと思われます。

Lighthouse,SEO

Posted by Yousuke.U