こんにちは。チェックボックス、ラジオボタンといえばよくカスタマイズ方法について言及されますよね。実際僕も2つほどカスタマイズの記事を書いていますし、よく読まれています。
ですが、よく考えてみてください。チェックボックスやラジオボタンの見た目をこだわったとして一体どれほどの効果があるのでしょうか。これらのカスタマイズは結構面倒で、注意しないと見た目が崩れやすかったり、tabキーでフォーカスを当てられなくなる（対策はある）というアクセシビリティ上の明確な弱点もあります。
それらのコストを負ってまでこだわる必要があるケースは一体どれほどあるのでしょう。デザイナーの方もその辺を意識せずなんとなくでデザインしていませんか？
今回はそんな話について考えていきます。
余計な実装コストが発生する
まず、チェックボックスやラジオボタンは見た目を変更するのが非常に面倒です。
- チェックボックスやラジオボタンの見た目を変更する用のプロパティがあまりない
- 普通の要素であれば適用されるようなプロパティも、多くが適用されない
からです。
近年はaccent-colorというプロパティの登場により色だけは変えることが容易になりました（参考：https://itokoba.com/archives/6851）。
しかし形状などは相変わらず変更できません。よって変更するにはイレギュラーな方法を利用する必要があります。具体的な例は、
- 元々あるチェックボックス/ラジオボタン部分をなくす
- before/after擬似要素でチェックボックスもしくはラジオボタンの見た目を作る
という手順になります（参考：https://itokoba.com/archives/768）。
この場合、元のボタン部分が消えているためtabキーによるフォーカスが当たらずキーボードから操作できなくなります。それを解決するにはもう少し複雑な方法を用いる必要があり、さらに実装コストが高くなります。（いずれその方法も記事にします。）
もちろん、じゃあその実装コストがどうしようもないほど高いかというとそんなことはありません。しかし「大した意味もないことに時間と手間をかけるべきなのか」ということが言いたいのです。
accent-colorで実装できる範囲ならたったの1行で解決しますからね、それで十分ならそれで済ませていいと思うわけです。
デザインが「Webの仕様を守っていない」という視点
現状のHTML/CSSの仕様上、「チェックボックス/ラジオボタンは大幅に見た目を変更できない」のが標準とも言えます。であれば、それらを無視したデザイン側に問題があるという捉え方もできます。
「デザインがWebの仕様を守っていない」という見方です。
チェックボックス/ラジオボタンは一応やりようがあったからよかったものの、仮にどうやっても実現できないものだったらデザインも何もないですからね。
あくまでチェックボックスやラジオボタンはその一例として槍玉に挙げたに過ぎず、同様の事例はさまざまな機能において発生しているように思います。
技術側も日進月歩、一昔前に比べればWebの標準に近いところで実装できるものはずいぶん増えました。しかしそれでも「これくらい簡単でしょ？」と思われるものが実装上は面倒ごとが多い場合はいくらでもあります。
逆に言えば一見大変そうな機能でも実は超簡単というケースもあり、Webデザイナーの方がこういった技術側の事情を知っていると開発が非常にスムーズになります。
まとめ
今回の記事の注意点として、
- チェックボックス/ラジオボタンの見た目をこだわることが常に無価値とは考えていない
- チェックボックス/ラジオボタンはあくまで一例に挙げたに過ぎず、要は「仕様の範囲内でデザインすることで開発がスムーズになる」ということが趣旨
であることを書いておきます。あえて言いたいことを言葉を選ばずに言えば、
「Webの仕様をろくに守らず好き勝手に見た目を作る。そんなものはWebデザインではなくデジタルお絵描きにすぎない。」
ということです。そんなこと言われなくてもやっているデザイナーさんも数多くいると思いますが、近年はWebデザイナーに参入する人が増えてきましたからね。啓蒙だと思っていただければ。
コメント