Webアクセシビリティ勉強会

buttonタグによるボタンの実装

buttonタグとdivタグによる操作性の違いを確認してみてください。

buttonタグはデフォルトでデザインが適応されているため、divタグのボタンにも似たデザインを当てています。

buttonタグで実装されたボタン

buttonタグが押された回数: 0

buttonタグでは、カーソルをホバーした際の色の変化が自動的に設定されており、ボタンと認識しやすくなっている。また、Tabキーを押すと、フォーカスが当たるようになっている。

divタグで実装されたボタン

DivタグのButton

buttonタグが押された回数: 0

divタグでは、ボタンという認識がないため、カーソルを合わせてもテキストとして扱おうとする。また、フォーカスが当たらないため、キーボード操作ではクリック不可能。