この記事は最終更新から1年以上経過しています。現在の仕様や情報と異なる場合がありますので、ご注意ください。

PageSpeed Insightsで「ボタンにユーザー補助機能名が指定されていません」と警告が出た際の対処方法をご紹介します。

警告内容

ボタンにユーザー補助機能名が指定されていない場合、スクリーン リーダーでは「ボタン」と読み上げられるため、スクリーン リーダーを使用しているユーザーはボタンの用途がわからず、使用することができなくなります。ボタンにアクセスしやすくするための方法の詳細

対処方法

スクリーン リーダー向けにaria-labelを設定すればOKです。

Before:

<button class="btn"></button>

After:

<button class="btn" aria-label="メニューボタン"></button>