ハンバーガーメニューのようなラベルのないbuttonにはaria-labelを付けないと「Ensures buttons have discernible text svg button」というアクセシビリティのLintエラーが出てしまう

概要

本稿ではアクセシビリティをチェックするaxe-linterで「Ensures buttons have discernible text svg button」というエラーが出た時の対処法をまとめます。

結論

<button>保存</button> のようにテキストのラベルをつけられないハンバーガーメニューのようなアイコンのみのボタンには、aria-label を付けるとエラーが出なくなります。

<button class="md:hidden" aria-label="メニューを開くボタン">
  <svg class="h-6 w-6 fill-current" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
  </svg>
</button>