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

Firebase Auth Googleログイン時のリダイレクトドメインを変更する

CNAME追加とHostingの「カスタムドメインを追加」を行う

jsで配列からランダムにn件取得する

lodashのsampleSizeを使った

jsで連番の配列を作成する

Array.from(Array(n).keys())

VercelのPreview環境に固定のサブドメインを割り当てる

X-Robots-Tagは付与されないので注意