今朝CSS Weekly Issue #178で取り上げられていた記事「CSS vs SVG: Styling Checkboxes and Radio Buttonsを見ました。
個人的にはチェックボックスやラジオボタンはブラウザ標準のものを使うのが無難かな（ユーザーが見慣れている点、アクセシビリティ面などで）と思うのですが、Androidだとチェックボックスやラジオボタンがどうも小さいですし、サイトのテイストに合わせてかっこよく見せるのもありなのかな、とも思うこともあります。
ただ、今回のサンプルもそうなのですが、チェックボックスやラジオボタンのカスタマイズをしている場合にマウスでしか操作できない状況にあるのをよく見かけます。アクセシビリティを確保しつつ、チェックボックスやラジオボタンのカスタマイズするには、以下の点に注意する必要があるのかなと考えています。
- input[type="radio"]・input[type="checkbox"]を
display: none;で非表示にしない - チェックボックスやラジオボタンにフォーカスが当たった際に、フォーカスが当たっていることを示す
- outlineを表示する
- フォーカスが当たっている場合に表示する画像を用意する
display: none;にするとフォーカスが当たらないため、キーボードで全く操作ができません。スクリーンリーダーでも読み上げられません。では消さない場合にどうするかですが、カスタマイズしたチェックボックスやラジオボタンの後ろに配置するパターンが多いようです。Accessible custom checkboxes and radio buttons | 456 Berea Streetで紹介されていました。
記事のコメント欄でアクセシビリティについて質問があり、解決法にvisibility: hidden;にすることが紹介されていましたが、そのパターンは良い結果にはなりませんでした。
先に挙げた点にそって改良したところ、キーボードでもフォーカスが当たり、チェックボックスの周りに赤い点線（一応outlineです）が表示されています。
下記に改良したサンプルを掲載します。
改良したサンプル
サンプルはCodePenに掲載されていましたので、Forkしてキーボード操作もできるようにしました。また、IEとNVDAの組み合わせで使用できるか確認したところ、問題なく操作ができました。（チェックの状態もきちんと読み上げられます。）
サンプル部分をクリックして、タブキーを押していただけると分かるかと思います。
CSSスプライトのパターン
See the Pen Styling checkboxes with CSS - Image Sprite by Hideki Abe (@hideki-a) on CodePen.
SVGのパターン
See the Pen Styling checkboxes with SVG by Hideki Abe (@hideki-a) on CodePen.