Lighthouseの「Links do not have a discernible name」に対応する
Lighthouseを使用してサイトの監査を実施したところ、「Links do not have a discernible name」という警告が表示されたので対応した。
もともとはdiv要素全体をリンクにしたかったので、以下のように設定していた。
(Next.jsとTailwind CSSを使っている場合のサンプル)
<div>
<Link url="/some/url">
<a className="block w-full h-full"></a>
</Link>
</div>
テキストラベルが画面に表示されない場合には[[aria-label]]属性を使用するべきとのことだったので追加。
<div>
<Link url="/some/url">
<a className="block w-full h-full" aria-label={description}></a>
</Link>
</div>
これで警告が出なくなった。