ラジオボタンに初期値をおくべきかという議論
近ごろ職場近辺で「モーニングがある」「きちんと分煙されている」「携帯電話の電波が入る」の3条件をいずれも満たすようなカフェを探している kagata です。2つまではわりとどこも満足できるのですが、3つすべてとなるとなかなか難しいようです。
さて、先日弊社内で「ラジオボタンには初期値を設けるべき」とごく軽い気持ちで発言したところ、社内外で思いのほか活発な議論が巻き起こるということがありました。その際に調べた前提的な話を備忘のためここにまとめるとともに、今考えている疑問や課題をご紹介します。「そんなことも知らないの？」ということがあったら、ご教授いただければ幸いです… m(__)m
HTML の仕様を確認する
「ラジオボタンには初期値を設けるべき」だとわたしが最初に学んだのは10年くらい前のことです。当時はプログラミングでなく主に HTML を書いて生計を立てていました。そのころに次の記事を読んだのが最初だったと思います。
input要素 | ばけらの HTML リファレンス(未完成)
ラジオボタンには初期値が必要です。どれかひとつに checked属性を指定して初期値を指定する必要があります。ブラウザによっては checked 属性が何もない場合に何も選択されていない状態になってしまう場合がありますが、このような動作はエラー処理であり、仕様で保証されているものではありません。必ずどれかひとつを checked とする必要があります。
ではここで、当時の HTML 仕様である HTML4.01でどのように定められていたか確認してみましょう。また、現代の HTML5ではそれがどのように変わったか（あるいは変わっていないのか）確認してみましょう。
若いころ：HTML4.01
HTML4.01の仕様書には次のような記述があります。
同じ名を持つラジオボタンコントロール群の中に、初期値が“on”のものが存在しない際に、ユーザエージェントがどのコントロールを“on”として選ぶかは、定義しない。 注意。 現状の実装がこのケースを様々に処理しているため、本仕様は RFC 1866 ([RFC1866]の8.1.2.4) とは異なる。 そこにはこう書いてある。
複数のラジオボタンの中で、常に1つがチェックされた状態となる。ラジオボタンコントロール群のINPUT要素に`CHECKED’と設定されたものが存在しない場合、ユーザエージェントは初期値として群の最初のラジオボタンを“on”の状態にしなければならない。
ユーザエージェントの動作が現実にはこうならないため、著者は各ラジオボタン群につき1つの初期値を確実に“on”にしておく必要がある。
上記記事にあったとおりですね。ちなみに RFC1866というのは、実は HTML2.0の仕様書です。元々はラジオボタンに初期値がなければ最初の選択肢をチェックすることとしていたが、ブラウザ側の実装がそれを守らないから、仕様側はもう何も言わないことにした…という歴史的経緯も興味深いです。
なお、HTML4.01の原文はこちら。
Since user agent behavior differs, authors should ensure that in each set of radio buttons that one is initially “on”.
現代：HTML5
かつて HTML コーダーとして上のように教わっていたのですが、HTML コーディングからしばらく離れているうちに世は HTML5の時代になりました。もしかしたら現代では初期値なしラジオボタンも許されていたりして…と心配になったわたしは HTML5の仕様もみてみました。
結論から言うと HTML5でもラジオボタンに初期値を求めていることに変わりはありません。が、内容は若干複雑です。
HTML5 から、ラジオボタンに required 属性が利用できるようになりました。それだけみると、HTML5では required でない（つまりどれも選択されない）ラジオボタンを許容しているように見えますが、 required 属性の説明には必ずしもそうでない旨の記述がありました。
ラジオボタングループが必須とされるかどうかにかかわらず、混乱を避けるために、著者は、グループ内のすべてのラジオボタンで属性を指定することが推奨される。実際一般に、これはユーザーが戻ることができない状態であるため、著者は、最初の場所で任意の最初にチェックするコントロールを持たないラジオボタングループを回避することが推奨されており、したがって一般に貧弱なユーザーインターフェイスと見なされる。
いったん選択すると選択しない状態に戻せないから、というアクセシビリティ的観点の理由付けになっています。HTML4.01のような「初期値が不定だから」という理由付けは見当たりませんでした。
原文はこちら。
To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group.
“should”（すべき）よりさらに下がって “be encouraged”（するよう推奨する）となっていますが、仕様として初期値なしラジオボタンはよくないとの言及は引き続き残っています。
アクセシビリティに関して信頼できる筋から
HTML の仕様が上のようになっているという事実はありつつも、頭ごなしにそれを強制するのではなく背後にある理由に目を向けないといけません。現代の HTML 仕様はアクセシビリティ上の理由からラジオボタンに初期値を設けるよう定めているようです。では、アクセシビリティの観点からラジオボタンの初期値について言及した人たちの意見をみてみましょう。
若いころ：ニールセン博士の Alertbox
わたしが HTML の勉強をしていたころ、このへんの話の大家といえばヤコブ・ニールセン博士でした（最近追いかけていませんでしたが、今もご活躍のようです）。博士は2004年の記事で次のように述べていました。
ラジオボタンでは常に初期値を設定すること。ラジオボタンは、常に 1 つの選択肢が選択されているはずのものだ。したがって、初期値がないラジオボタンを提示するべきではない。（その反対に、チェックボックスはデフォルトではどの選択肢も選択しない場合が多い。）
もしユーザがどれも選択できないというようなことがある場合、例えば「該当無し」といったラベルのついた、その目的のためのラジオボタンを用意しておくべきだ。明確に中立である選択肢をクリックさせるほうが、何も選択させないことによって暗示させるよりもよい。特に、何も選択させないということは、常に 1 つの選択肢が選ばれているというルールに違反する。
現代：『デザイニング Web アクセシビリティ』
『デザイニング Web アクセシビリティ』という書籍が今年出て話題になりました。アクセシビリティがらみの話題では、今後の標準になるのではないかと思います。
この本の P143「6-4 入力が困難なフォーム」に次のような記述があります。
択一選択にはラジオボタンを使う
ラジオボタンは原則として、常に何かひとつが選択されている状態になります。初期状態で何も選択されていない場合、一度選択すると元に戻せなくなりますので、未選択状態に意味をもたせることは避けるべきです。できれば、初期選択で何かが選択されている状態にしておきましょう。
アクセシビリティの文脈でも、やはり昔も今も変わらずラジオボタンには初期値をつけるのが望ましいとされているようです。
検討中の課題
というわけで、わたしが HTML を学んだ10年前には「ラジオボタンには初期値をつけるべし」とされており、10年を経た現代でも（細かい状況の変化はありつつ、大枠は）変わっていないらしいことがわかってきました。
しかし、上で調べたことについて一部疑問があったり、また初期値必須の原則を現場に適用しようとすると異論が出たりして、自分の中で検討中の課題がいくつかあります。
HTML5のラジオボタンに required 属性があるのはなぜ？
required 属性は初期値なしでないと意味がないような気がします。入力必須のラジオボタンなら初期値なしを許容してよいのでしょうか。HTML5仕様書には、特にそのあたりの説明はないようです。
HTML5の仕様をつくった人たちは不便を感じなかったのか？
アクセシビリティ上適切かはいったんおくとして、「排他かつ未選択も可」という UI は発想としては自然なように思います。例えば伝統的な扇風機の風量切り替えボタンとか、多色ボールペンとか。
HTML5 では input 要素の type が大幅に拡充されました。そのときに、そういう UI も追加しようという議論にはならなかったのでしょうか。気になります。
初期値つきラジオボタンが嫌いな人もいるらしい
上で見たように、Web フォームに初期値なしラジオボタンが使われるようになったのはいわば「昔のブラウザのバグ」がきっかけだったようです。そんないきさつにもかかわらず、今やずいぶん広まってしまったように思えます。例えば、Twitter のアンケートフォームのようなメジャーなサービスにも初期値なしラジオボタンが実装されている、という話が社内から出ました。
そうしてもともとは適切でないとされていた UI に人々が慣れ親しんだ結果、例えば性別を任意で設定させるラジオボタンに「男性」「女性」「設定しない」のような選択肢を置くと
「＜設定しない＞って何？それって不自然」
というような反応が返ってくるようになったのかもしれません。
入力任意なのに「男性」「女性」しかないと「いったんチェックを入れると必ず回答しないといけなくなってしまう」という不具合になり、そうなってから
「＜設定しない＞を入れましょう」
というと
「かといってそれもキモチワルイのでいや」
という話になり、ラジオボタンリセットボタンやらトグルするラジオボタンやら排他的チェックボックスやら独自の UI を発明するに至る…なんて展開もみられるようです。
でも、それらは本当に初期値つきラジオボタンより効果的なんでしょうか？一般的には、定石とされる UI のわかりやすさを超えるのは難しいように思います。また一方で、どんな UI に慣れているかはユーザーの属性によって違ってくるでしょう。結局は個々のサービスごとに計測してみないと、確たる結論は出せなさそうです。
それは設問が悪いのかも
たとえば Web フォームに
「ダイレクトメールの郵送を希望しますか？」
という質問を立てて、そこにラジオボタン「はい」「いいえ」「設定しない」を置く…ということはあまりしないと思います。システム上「いいえ」と「設定しない」を区別する必要は通常ないでしょう。それなら、
「ダイレクトメールの郵送を希望する」
というチェックボックスをひとつ置けばよいことです。
「設定しない」に相当するような初期選択肢の存在がキモチワルイとき、それは UI の見た目でなく設問の立て方のほうに問題があるのかもしれません。部分的な UI の議論にとどまるのではなく、フォーム全体としてわかりやすくなっているか検討する必要があるでしょう。
EFO っていうんですかね？そのあたりの知見が個人的にあまりないので、今後蓄えていきたいところです。
