Lighthouseの「Buttons do not have an accessible name」の対処方法

ボタンタグにaria-labelを追加すれば解消します。
自身のケースではVuetifyを使用していたためv-btnタグにaria-labelを追加しました。

<v-btn color="primary" block aria-label="検索する">
    <span>検索する</span>
</v-btn>

aria-labelとは?

テキストラベルが画面に表示されない場合に使用します。
例えば、何かを閉じるボタンとして☓アイコンのみのボタンを作成した時に、閉じるボタンと分かるようにaria-label="閉じる"を指定します。
aria-labelを指定しておく事で、目の不自由な方向けの読み上げ機能などに対応できるようです。

コメントする