モダンなボタンについて radio や checkbox は使用するべきでしょうか？

現在 Vue.js のコンポーネントを用いて web アプリを開発しております。その中で最近のモダンなデザインのボタンの html についてどこまでradioやcheckboxを用いて html 的に正しい構造を再現するべきかと悩みました。
端的にまとめるのが難しいので、いくつか悩んだ例を表示します。

たとえば以下のような言語表示を切り替えるようなボタンが合った場合（汚い手書きで申し訳ございません）

HTML 的にこれを構造で表すとすると

html
1<label>                                                 // モダンなデザインを適応
2  <input type="radio" name="lang" checked="checked">JA  // display: none;
3</label>
4<label>
5  <input type="radio" name="lang" >EN
6</label>

このようなイメージになると思います。これは構造は html で示し、スタイルは css で表すという原則に適していると思います。
しかし以下のような、９つのマスの中から１つを選ぶようなパネルが合ったとして

これを

html
1<label>                                                 // モダンなデザインを適応
2  <input type="radio" name="panel" checked="checked">1  // display: none;
3</label>
4　︙  // 以下８つの radio を列挙する

と書くことはないように思えます。しかし html が構造を表すという原則からは９つのradioを書き、スタイルを頑張って css で変更するのが正しいような気もします。

あるいは Vue.js で一つしか選べない選択肢の設定画面を作るとします。この場合radioを使わなくてもコンポーネント内で情報の処理が容易ですのでradioの一つしか選べないという動作を簡単に再現できます。さらに Ajax で Json を送る都合上、html のvalueに情報を設定するよりも:msg="xxxxx"等のコンポーネント間のやり取りのほうが簡潔なのではとも思ってしまいます。（ここで言いたいのは Vue.js に限らず、モダンなコンポーネント開発において value などは使うメリットがないように思えるということです。）こうなると、無理してradioやcheckboxを使うことなく、buttonで全部いいのではとも思います。この場合のデメリットは tab キーが使えないことや視覚障害者への補助が効かない可能性があるということでしょうか。

このようなフォームではないがユーザから入力値を受け取る部品を、わざわざ css でスタイルを打ち消す苦労をしてまでcheckboxやradioを駆使して再現するべきなのでしょうか？それともクリックする部分は全てbuttonでまとめてしまってもいいのでしょうか？また使い分けがあるとして、これらの線引はどこにあるのでしょうか？

脈絡のない文章で申し訳ございません。回答をいただけると嬉しいです。

行動規範の内容に同意します

回答3件

こんにちは。

視覚障害者への補助が効かない可能性があるということでしょうか

これについては、WAI-ARIAロールとステートを適切に付することによって回避できると思いますし、すべきことかと思います。
基本的なフォームのヒント - アクセシビリティ | MDN
事例 2: ラジオグループを識別する | ARIA17: 関連するフォームコントロールを特定するために、グルーピングロールを使用する | WCAG 2.0 達成方法集

と、言うだけなら簡単ですがイチから実装はなかなか面倒だと思いますので、なんらかのライブラリを使った方がいいのだと思います。

tab キーが使えないこと

これについては、tabindex属性によって解決を図るべきかと思います。

tabindex - HTML: HyperText Markup Language | MDN

投稿2021/01/23 02:35

Lhankor_Mhy

総合スコア36960

ユーザから入力値を受け取る

でしたら、ユーザーがちゃんと使えていれば(UXの観点)どのように組まれていようと関係なく、
それは作る側の都合でしかないので、ご自身もしくはプロジェクトの方針として決めてください。

投稿2021/01/22 22:32

m.ts10806

総合スコア80875

ベストアンサー

答えになってないかもですが、、

言われている「原則」的なお話は、要は「誰が見ても分かりやすい状態であるための考え方」だと思うので、その観点で言うなら、Vueという個別のライブラリに依存したやり方が、誰が見てもわかりやすいモノと言えるのか？
HTMLベースでの従来からのWeb開発とは全く別のパラダイムから生まれたVirtual DOMの世界で、コンポーネント部品として独自に作ろうとしているモノに、旧来の観点を持ち込む必要があるのか？

上記のどっち方向にも話は展開できそうですけど、個人的な好みは後者です。でもたぶん状況によって使い分けると思います。具体的には、チーム開発などメンバー間で書き方統一したいような時は前者、一人で作る時や、自分しか見ないようなところを作る時は自由にします、みたいな。(でも犠牲になった「分かりやすさ」のために、Docをしっかり書くとか、別の努力はするかもしれない)

要するに線引きするのは自分で、決めの問題じゃないかと。目的次第で都合よく考えて、面倒が少なそうな方を選べばいい気がします。

投稿2021/01/22 20:55