【HTML】button についてのアレコレ

投稿日 2021年11月5日
更新日 2023年5月12日
著者 NKMR
カテゴリー HTML

ご教示いただいたので改めて勉強し直したことの備忘録。アクセシビリティに配慮しましょう。

【HTML】button についてのアレコレ

ということで button について色々と調べました。

いやぁ、奥が深いですね。

button とは

HTMLの button とは、フォームの送信やリセットのボタンを設置するために使わるタグ。

他にもクリックしたらJavaScriptで何らかの処理を行いたい場合にも使われる。

button の機能は『type属性』で決める

button の type属性は、

<button type="○○">

という形で指定します。

種類は３つで

submit（送信する）
reset（フォームの内容をリセットする）
button（自分で操作を加える）

です。

type=”button” について

submit と reset は説明不要かと思うので button のみ解説します。

button タグに type=”button” を指定すると、デフォルトでは無反応のボタンとなるので、送信＆リセット以外の目的でボタンを作る場合は type=”button”を指定します。

クリックで JavaScript を作動させたい場合なども button 属性です。

aタグとの使い分け

基本的にはクリックで他のページへ飛ぶようにしたい場合には a タグを使い、それ以外のボタンは button タグを使用する。

button の注意点

button タグの注意点は以下

a タグの中に button タグ
outline の無効化

a タグの中に button タグ

HTML5 では a タグの中に対話型コンテンツを入れてはいけないというルールが定められている。

outline の無効化

outline とは、ボタンをクリックすると表示される青枠のことで、これはフォーカスが当たっていることを意味します。

このアウトラインは

button { 
  outline: 0;
}

というCSSで消すことができますが、たとえば、キーボードでパソコンを操作しているユーザーはこの青いアウトラインを目印に今どこにフォーカスが当たっているかを判断するので、アクセシビリティの観点から残しておきましょう。（経験上、デザイン的に「外してくれ」と言われるケースもありましたが、そんなときは要相談ですね）

ちなみに、div タグや href属性のない a タグには上記のフォーカスが当たらず、フォーカスをあてるためにはtabindex 属性が必要になります。

<a class="button" tabindex="0"></a>
<div class="button" tabindex="0"></div>

tabindex 属性を付与することにフォーカスを当てることはできますが、アクセシビリティ的には避けたほうがいいかもしれません↓

スクリーンリーダーの読み上げ機能について

スクリーンリーダー（音声読み上げソフト）は、button タグをボタンだとわかるように読み上げます。

div タグや a タグでボタンを実装した場合はブラウザはそれらの要素がボタンであると解釈できないので「ボタン」と読み上げません。

「ボタン」と読み上げるようにするには role=”button” をつける必要があります。

<a class="button" role="button"></a>
<div class="button" role="button"></div>

button の中に画像を使いたい場合

例えば何かしらのアイコンボタンをクリックしてアイコンボタンの画像を切り替えたい場合は、

<button type="button">
  <img src="hoge.jpg" alt="アイコン">
</button>

のように画像を button で囲ってあげればOK。

まとめ

アクセシビリティ関連などはまだまだ勉強が必要なので、そのうち追記すると思います。

とりあえずページ遷移以外のボタンは button タグを使ったほうがいいですね。（デザインとの兼ね合いは要相談）