<button>か？ <input type="checkbox">か？ 使い分けを知りたいです

Question

<button>か？ <input type="checkbox">か？

その使い分けについて、基準がわからず困っっっています。

以下の例を含め、<button>か？ <input type="checkbox">か？ という問題について、みなさまのご見解をお聞かせ頂けませんでしょうか。

###例：twitter
たとえばTwitterのフォローボタンは<button>ですが、これは<input type="checkbox">の方が良いのではないでしょうか？

なぜなら、

<button> →「フォロー中かどうか」という状態をデータ属性などで作らなければならない。 <input type="checkbox"> →作らなくてもチェック状態は取得できる。

ので、<input type="checkbox">の方が手間が省けるのではと考えました。

###例：teratial
teratailの通知アイコンなんで<div>ですけど、これは役割が明示されず、あまり良くないですよね？
それとも簡略されていてむしろ良いのでしょうか？

Answer 1

役割分担

例に挙げられたteratail,twitterのフォロー/アンフォローUIは最適解ではないと考えています。
それぞれの役割については、s8_chu さんとほぼ同じ考えを持っています。

• 4.10.5 input要素 - HTML Standard 日本語訳
• 4.10.6 button要素 - HTML Standard 日本語訳

タグ	役割
<input type="checkbox">	フォーム(設定)の入力を表す
<button>	(type属性値がないなら)、フォーム(設定)の送信を表す

問題はteratail,twitterがこれらの役割を一つの要素でまかなっている事にあります。
<button> を使っているのですから、フォロー/アンフォローのリクエストを送るのは問題ないでしょう。
しかし、現在のフォロー状態を <button> で表すのは不適切と言わざるを得ません。

問題A. 押せるボタンである事が見た目から分からない

「フォロー中」を押したらフォロー解除されるという挙動はボタンを押してみるまで分かりません。

問題B. 表示されている内容が何を表しているのか分からない

teratail,twitterでは [フォロー中] と表示されているボタンにマウスポインタを合わせれば、[解除] と表示されるので、勘のいいひとなら分かるでしょう。
しかし、次の点において良いUIとは思えません。

• 「ボタンかもしれない」と思われなければ、マウスポインタを合わせない
• スマートフォンのタッチUIでは確認がしづらい
• 音声ブラウザに配慮がない

teratail,twitterはそうではありませんが、某サイトでは

• [follow], [unfollow] をトグルする
• [follow] をクリックするとフォローされ、[unfollow] をクリックするとアンフォローされる

という仕様でした。
[unfollow] と表示されているので、フォローしていない状態だと思ってボタンをクリックすると、フォローが解除されてしまいます。
素直に英語を読めば、「follow(フォローせよ)」「unfollow(アンフォローせよ)」なのだから分かるだろう、という考えもあるかもしれませんが、現行設定を命令文から反転させて認識するのは回りくどく感じてしまいます。

解決策

「現行設定の表示」と「設定変更ボタン」は分割するのが適切と思います。

<span class="follow-status">フォロー中</span>
<button type="button" name="follow-status" value="false">フォロー解除する</button>

おそらく、狭い画面のスマートフォン画面用に考案されたUIですが、セマンティクス的には間違ったUIであると私は思います。

Re: ayaaya さん

Comments

[huwatoro]

まさに悩んでいた点をきちんと整理して頂き、その上で一般的な使い方からご見解まで、完璧なご回答です。ありがとうございました。

Answer 2

たとえばTwitterのフォローボタンは<button>ですが、これは<input type="checkbox">の方が良いのではないでしょうか？

input 要素のチェックボックスは、一般的には、状態の選択という入力を行なうために用いられ、選択に伴って実行される動作はありません。たとえば、「チェックボックスをクリックしたらアカウントの登録が完了する」といった動作をする Web サイトはあまり存在しないと思います。

The input element represents a type data field, usually with a form control to allow the user to edit the data.

参考: HTML Standard - § 4.10.5 The input element

一方でボタンは、一般的には、押下することで特定の動作を実行するものです。

GUIのボタンは、現実世界における押しボタンと同様に「押す」ことで何かの操作を行なう為のコンピュータ画面上の表現である。

参考: ボタン (GUI) - Wikipedia

Twitter のフォローボタンが行ないたいことは、ただの状態の切り替えではなく、「フォローする」、「フォローを解除する」という動作です。そのため、状態を選択するだけのチェックボックスではなく、何かの動作を起こすものとして、 button 要素を使用するほうがより望ましい、と考えたのかもしれません。

---

teratailの通知アイコンなんで<div>ですけど、これは役割が明示されず、あまり良くないですよね？

検討の結果、「通知アイコンの部分はボタンではないため、 button 要素は不適切」という結論になったのか、通常はすべて div 要素で記述するという規則になっているのか、本当のところはわかりません。

teratail にお問い合わせすることで、なぜ div 要素が使われているのかがわかるかもしれません。

Comments

[huwatoro]

なるほど動作にあった機能を理解しておかなければいけませんね。ご丁寧にありがとうございます。参考にさせて頂きます。

Answer 3

<input type="checkbox"> だと四角のチェックボックスが出てしまい、
これのデザインを変えるなると余計に手間がかかるので、
デザイン性をもたせる部分であればbuttonタグなどがよく利用されます。

あとはサイト内で使っているJavascriptライブラリ(TwitterだとReact.js)によっては
そちらで状態管理と見た目の変更を同時にやれるので、buttonタグの方が作りやすい、などもあると思います。

Comments

[huwatoro]

チェックボックスそうでしたね(;^_^A
ライブラリも関係しているとは考えば及びませんでした。
ありがとうございます。

teratailがdivでやっているのはどうしてだと思いますか？

[yasutomi]

Myタグによる絞り込みのことを指しているのであれば
checkboxはオン・オフの2パターンだけで
厳密・緩い・無しのような3パターンには対応できないからです。
> teratailがdivでやっているのはどうしてだと思いますか？

[Eggpan]

フォーム送信ボタンとして使う(<button type="submit">)、などでなければ、
ただのhtmlブロックなので、divもbuttonも大差ないといえば無いんですよね。

teratailの場合、ブロック要素は基本divで作って、
「コメントする」のボタンなど、送信するものに関してはbuttonタグを使う、となっていそうですね。

[huwatoro]

@yasutomiさん
通知アイコンです

[huwatoro]

@Eggpanさん
送信かどうかでわける、なるほどありですね。ありがとうございます。