LightHouse の Accessibility で button タグの中にテキストがないと注意が出たので解決方法についてまとめました

【実際に表示された注意文】

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 とは？

aria-label 属性は対話型要素にラベル付けする文字列値を定義します。

aria-label

ようするに、ボタンタグの中にテキストがないと、ボタンがどんな意味を持っているのか与えることができないため、この aria-label によって意味を与えるのが目的なようです。

対話型要素は、「ユーザーが操作する前提の要素」を指します。

例えば、ボタンやリンクと言った要素はユーザーが操作する前提なので対話型要素で、ユーザーが読むだけのテキストは違います。

まとめ

以上です。

画像の ALT に近い感覚で使う感じでしょうか。

button タグ内にテキストがない時は注意しようと思います。