Laravel

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

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

⇨ 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>

Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。

aria-label とは?

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

くわしくはこちら

まとめ

以上です。

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

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

それでは!

人気記事

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

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