【Lighthouse】Buttons do not have an accessible nameが出た時の解決策
1757 ワード
事象
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 属性を使用することがあります。
参考記事
Author And Source
この問題について(【Lighthouse】Buttons do not have an accessible nameが出た時の解決策), 我々は、より多くの情報をここで見つけました https://qiita.com/nevius5829/items/b31778fad203adc11e6c著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .