divで作られたボタンはボタンぽいだけ。押せない人が出てくるのでやめよう。

この記事はスターフェスティバル Advent Calendar 2023の 16 日目の記事です。

はじめに

どうも、nano72mkn です。
今年の夏から Web アクセシビリティを勉強し始めて、今まで自分が作って来た UI の中にはユーザーによっては使えない/使いにくい物であったと分かり、反省しているところです。
その中でも、良く目にするし過去に自分でも作った事がある div で作られたボタンについて自戒の念も込めて書きたいと思います。

div で作られたボタン

GitHub でもコード検索したら結構出てくる div で作られたボタンですが、React や Vue などを触った事がある人なら作った事や見た事があるかもしれません。

↓ こんな感じのボタン要素

<div onClick="{hundleClick}">ボタン</div>

しかし、それはクリックしたらイベントが発火するだけの見た目がボタンぽい何かです。

button タグの機能

HTML の button タグにはボタンぽい style だけでなく、複数の機能も実装されているので紹介します。

フォーカス

tab キーでフォーカスをあてる事ができます。
div で作った場合は、フォーカスを受け取るためにtabindexを付与する必要があります。

支援技術による認識

スクリーンリーダーなどの支援技術を使用する場合に、ボタンとして認識するようになっています。
div タグで作った場合には、role属性でbuttonと指定する必要があります。

キーボードでの操作

Space、Enter キーなどでイベントを発火する事ができます。
div で作った場合には、イベントリスナーに keydown を登録して特定のキーを押された時にイベントを発火するように実装する必要があります。

ボタンの要素は Button タグを使おう

div のボタンでも、一応対応方法はありますが全て対応するのは大変です。
なので、div から button に書き換えるだけで上記の機能を付与できるので、button タグを使用しましょう。

<button type="button" onClick={hundleClick}>
  ボタン
</button>

まとめ

HTML で用意されてるものがあればそれを使おう！
もし、ユーザーが操作する機能を作る時はキーボードだけで操作できるか確認してみよう！

おまけ

a タグに onClick を付与して js でページ遷移をしているものも見かけますが、こちらもやめておきましょう
a タグにも機能があり

• マウスで hover した時にブラウザの左下に遷移先が表示される
• 支援技術にリンク要素である事が認識できる
• 右クリックなどから別タブで表示できる

などの機能があります。
また、hrefが無いとフォーカスなどの機能が使えなくなってしまう為、リンクは a タグで href をつけることが大切です。

参考

• https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML
• https://gihyo.jp/book/2023/978-4-297-13366-5