spanタグにaria-labelをつけるのは非推奨

こんなことがあった

a11y対応としてアイコンボタンにアクセシブルネームを付与したい場面は度々あると思います。

例えば、以下のようなコードでアイコンボタンを実装したします。この場合、ボタンにはアクセシブルネームが付与されないためvoice overなどによる読み上げ時にただ単に「ボタン」とだけしか読まれず何のボタンであるのか知覚できません。

<button class="button">
  <span class="icon">
    <svg>...</svg>
  </span>
</button>

そんな時に使用できるのがaria-label属性です。これを明示的に書いてあげることで要素にアクセシブルネームを付与することができます。そこで、以下のような実装をしました。

<button class="button">
  <span class="icon" aria-label="編集">
    <svg>...</svg>
  </span>
</button>

しかし、この状態でaxe-DevToolsで検証してみると以下のようなエラーが出ていました。

spanタグに対してaria-labelを使用しているのが原因のようでした👀

spanタグにaria-labelをつけるのは非推奨

W3Cによるとcaption, code, deletion, emphasis, generic, insertion, paragraph, presentation, strong, subscript, superscript のロールを持つ要素にはaria-labelをつけるのを禁止しているようでした。

spanやdivは暗黙のロールがgeneric なのでaxe-DevToolsでもエラーになっているようでした。

https://www.w3.org/TR/wai-aria/#aria-label

今回のアイコンボタンの場合は以下のように実装するのが良さそうです！

<button class="button" aria-label="編集">
  <span class="icon">
    <svg aria-hidden="true">...</svg>
  </span>
</button>

おまけ(aria-hidden)

一つ前のサンプルコードでsvgにつけているaria-hidden="true"ですが、これをつけると要素がアクセシビリティツリーに認識されなくなります。例のようなアイコン画像描画に使用しているタグなどにつけてあげると読み飛ばされるようになるので、

参考文献

• https://www.w3.org/TR/wai-aria/#aria-label