【Lighthouse】Buttons do not have an accessible nameが出た時の解決策


事象

Lighthouse AccessibilityでButtons do not have an accessible nameが出た時の対処法

解決策

指摘を受けた要素にaria-label属性追加で解決

改善前

<button type="submit">検索</button>

改善後

<button type="submit" aria-label="検索する">検索</button>

aria-label属性とは?

aria-label によって、アクセス可能なラベルに使用する文字列を指定できます。これは label 要素など、その他のネイティブのラベル付けの仕組みよりも優先されます。たとえば、button にテキストコンテンツと aria-label の両方が存在する場合、aria-label の値のみが使用されます。
テキストの代わりに画像だけで目的を示しているボタンがあるとします。この視覚的なマークを見ることができないユーザー向けに目的を明確に示したい場合、aria-label 属性を使用することがあります。

参考記事