LighthouseでSEO診断!aria-label属性も活用しよう

2019年4月11日SEO

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

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

Links do not have a discernible name

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

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

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

問題を解決する方法

aria-label属性を付けます

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

title属性ではダメなのかな、と思いますが確かにちょっと用途が違う気がしますね

title属性を含めるならこういう事なのか

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

2019年4月11日SEOLighthouse

Posted by ヨウスケ