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>

これで警告が出なくなった。

参考

• Links do not have a discernible name
• aria-label 属性の使用 - アクセシビリティ | MDN