0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2022-01-15

事象

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

image.png

解決策

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

改善前

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

改善後

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

aria-label属性とは?

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

参考記事

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?