ホーム > Laravel > LightHouseのAccessibilityでbuttonタグの中にテキストがないと注意が出る
Laravel

LightHouseのAccessibilityでbuttonタグの中にテキストがないと注意が出る

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. 原因
  2. 解決方法
  3. aria-label とは？
  4. まとめ
オススメ本

⇨ Laravel 記事の目次はこちら

LightHouse を使って、ページのパフォーマンス改善をしていたら、

When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers

このような注意が出ていたので、これの解決方法についての記事です。

原因

以下のように、ボタンに対してアイコンを指定していたときに、この注意が発生していました。

<button>
  <i class="fa-solid fa-heart"></i>
</button>

どうやら、テキストのないボタンに対して表示されているみたいです。

解決方法

aria-label を指定する。

<button aria-label="いいねボタン">
  <i class="fa-solid fa-heart"></i>
</button>

オススメ本

aria-label とは？

テキストラベルが画面に表示されないときに、ラベル付けする文字列を定義するときに使う属性のようです。

くわしくはこちら

まとめ

以上です。

誰かの参考になればと思います。

感想・苦情は TwitterDM にご連絡ください。

それでは！

人気記事

PHP7.4 ＋ Laravel6 のプロジェクトを AWS EC2 にデプロイする

【laravel-breadcrumbs】Laravel でパンくずリストを実装する