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

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

next.jsにtailwindcssを導入する

VSCodeのTailwind CSS IntelliSense拡張が便利

Alexaに気温と二酸化炭素濃度を教えてもらう

「Alexa、気温」でセンサー情報を教えてくれるようになった

ESLintでimport文を自動で並べ替える

eslint-plugin-simple-import-sortを使う