Lighthouseの「Links do not have a discernible name」に対応する

公開日時
更新日時

Lighthouseを使用してサイトの監査を実施したところ、「Links do not have a discernible name」という警告が表示されたので対応した。

もともとはdiv要素全体をリンクにしたかったので、以下のように設定していた。

Next.jsTailwind 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>

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

参考


Related #js