「このチェックボックス、ブランドカラーに合わせて緑のチェックにできますか」「セレクトの矢印も、デザインに合わせたいんです」——受託の制作で、フォーム部品の見た目をブランドに揃えたいという要望は絶えません。困るのは、これまでこの要望に応える定番手段が**「ブラウザ標準のチェックボックスやセレクトを隠して、<div> と JavaScript で見た目だけ作り直す」**ことだった点です。見た目は揃いますが、その代償として、キーボード操作、スクリーンリーダーへの対応、スマートフォンの標準UI、フォーム送信時の挙動——本来ブラウザがタダで用意してくれていたものを、すべて自分で作り直す羽目になります。作り込み損ねれば、入力できない利用者が生まれる。
この「作り直し」を避ける手段が、ここ数年で大きく増えました。CSS-Tricks がまとめた What’s !important #12: ::checkmark, HTML Anchor Positioning（CSS-Tricks） でも触れられているとおり、accent-color や ::checkmark、さらにはセレクトの中身を CSS で組めるようになったことで、標準部品を隠さず、そのまま装飾する道が開けています。本記事では、受託で「ブランドに合った見た目」と「壊れないアクセシビリティ」を両立させる方法を、制作の立場から整理します。
なぜ「標準部品を作り直す」と負債になるのか
標準のフォーム部品を隠して自作する構成は、見た目以外のすべてを背負い込みます。
ひとつは、アクセシビリティの作り直しです。標準の <input type="checkbox"> や <select> は、キーボードで操作でき、スクリーンリーダーが「チェックボックス、未選択」と正しく読み上げます。これを <div> で作り直すと、これらをすべて自前で再現しなければならず、漏れれば操作できない利用者が出ます。
ふたつめは、プラットフォーム標準UIの喪失です。スマートフォンのセレクトは、標準だとOSのドラム式ピッカーが出ます。自作するとこの快適な標準UIが失われ、小さな画面で使いにくい独自ドロップダウンになりがちです。
みっつめは、保守の重さです。自作部品は、ブラウザの仕様変更や新しい入力方法に自分で追従し続ける必要があります。受託では、この「ブラウザがやってくれるはずだったこと」の保守が、長く重くのしかかります。
標準部品をそのまま装飾する方針は、この三つを丸ごと回避します。アクセシビリティも標準UIも送信挙動もブラウザのまま、見た目だけを CSS で足す。アクセシビリティを後付けで作り直すより、最初から壊さない方が確実だという考え方は、アクセシブルなフォームとナビゲーションの記事で扱った発想と地続きです。
まずは accent-color — 一行でブランド色を反映
最も手軽なのが、accent-color です。チェックボックスやラジオボタン、進捗バーなどの「効いている色」を、一行でブランドカラーに変えられます。
/* チェック済みの色などを、まとめてブランドカラーに */
:root {
accent-color: #176B87;
}これだけで、標準のチェックボックスはそのまま——つまりキーボード操作もスクリーンリーダー対応もそのままに——色だけがブランドに揃います。自作部品で数十行と JavaScript を要したことが、CSS 一行で、しかも何も壊さずに済む。多くの案件では、まずこれで要望の大半が満たせます。
チェックマークやセレクトまで踏み込む
色だけでなく、チェックマークの形やセレクトの中身まで作り込みたい場合も、標準部品を活かしたまま踏み込めるようになってきました。チェックボックスやラジオの装飾は、appearance を整えたうえで擬似要素や ::checkmark で形を作れます。セレクトについても、ブラウザが対応していれば、開いたときの選択肢リストの見た目を CSS で組めるようになり、これまで自作ドロップダウンでしか実現できなかった装飾を、標準の <select> のまま行えます。
| 要望されがちな装飾 | 手段 | 何が守られるか |
|---|---|---|
| チェック済みの色を変えたい | accent-color | 標準の操作・読み上げがそのまま |
| チェックマークの形を変えたい | appearance + 擬似要素 / ::checkmark | 標準のチェックボックスのまま |
| セレクトの矢印・選択肢を装飾 | カスタマイズ可能な <select> | スマホの標準UI・送信挙動 |
ポイントは、どれも「標準部品を消さない」ことです。見た目を足しても、土台はブラウザの <input> や <select> のまま。だからキーボードでも操作でき、支援技術にも正しく伝わります。ブラウザ対応がまだ十分でない装飾については、対応していない環境で「素の標準部品」に穏当に戻るかを確認したうえで採用します。新機能の採用可否を対応状況で判断する線引きは、モダンCSSネイティブ機能の記事の考え方がそのまま使えます。
受託で組み込むときの落とし穴
弊社が改修を引き継いだある会員登録フォーム（社名は伏せます）では、チェックボックスとセレクトがすべて JavaScript 製の自作部品で作られていました。見た目はブランドに揃っていましたが、キーボードだけで操作しようとすると選択できない項目があり、スマートフォンではセレクトの選択肢が画面からはみ出す不具合も残っていました。デザインのために、入力のしやすさが犠牲になっていたのです。
私たちはこの自作部品を、標準の <input>・<select> に戻したうえで、accent-color と擬似要素による装飾で見た目を作り直しました。チェック色はブランドカラーに揃い、スマートフォンでは OS 標準のピッカーが復活し、キーボードだけでも全項目を操作できるようになりました。やったのは、JavaScript で抱え込んでいた「部品の振る舞い」をブラウザに返し、見た目だけを CSS に残しただけです。
この案件で一番効いたのは、「見た目のために標準部品を捨てない」という原則でした。装飾は CSS で足せる時代になったので、わざわざ振る舞いまで自作する理由はほとんどありません。なお、accent-color で色を変えるときは、選択状態が色だけで判別されないよう、チェックの形や文言でも分かるようにしておくと、色の見分けが難しい利用者にも親切です。フォームのラベルや状態を正しく伝える観点は、スクリーンリーダー向けの名前を整える記事とあわせて考えると、見た目と使いやすさを両立できます。
どこから着手するか
フォーム部品の見た目を変えたいとき、まず「標準部品を隠して作り直す」を選ぶのをやめるところから、フォームは使いやすく・保守しやすくなります。色だけなら accent-color の一行で、形やセレクトの装飾も、多くは標準部品を活かしたまま CSS で足せます。足せば JavaScript が減り、キーボード操作もスマホの標準UIも自動で守られ、次の担当者も迷いません。
最初の一歩としては、いま自作部品で作っているチェックボックスを一つ選び、標準の <input type="checkbox"> に戻して accent-color で色を当ててみることをお勧めします。見た目が要望を満たし、キーボードとスマホで問題なく使えることを確認できれば、本番に出せます。
フォーム部品の見た目をブランドに合わせたいが自作で苦労している、過去に自作した部品でアクセシビリティやスマホ対応に不安がある、見た目と使いやすさを両立させたい——そうしたお悩みがあれば、グリームハブのお問い合わせからご相談ください。現行フォームの実装を拝見し、標準部品に戻して CSS で装飾できる部分を切り分けたうえで、軽く壊れにくい形に作り直します。
