アクセシビリティで気をつけるcheckbox,radioのCSS

※ 2020/12/15 フォーカスについて一部追記、参考リンクを追加
※ 2020/04/16 加筆、CSSの表現を一部修正しました

この記事で言いたいことは
ラジオボタン、チェックボックスをdisplay:none;してキーボード操作できなくして、CSSで装飾するのは止めろ！
ということです。

巷にフォームのラジオボタンやチェックボックスをCSSで装飾するサンプルコードがありますが、キーボード操作を確認してるのか？と疑問に思うCSSをよく見かけます。

こんなコードを平気で書いてる人はアクセシビリティを全く考えてない人です。

input[type="radio"] ,
input[type="checkbox"] {
  display:none;
}

テックノート – ユーザビリティのよいチェックボックス・ラジオボタンのCSS見本５３選！ で紹介されてる中でもキーボード操作できるのは10個もありませんでした。（ドメイン期限切れ）

• チェックボックスをおしゃれにするCSSスニペット25選。アニメーションが刺さる！ | KodoCode
• ラジオボタンをおしゃれにするCSSスニペット16選。ポチッ！で感動をお届け。 | KodoCode

上記で紹介されているCSSサンプルも大半がキーボード操作できないものでした。
フォーム系は必ずキーボード操作（特にTABキー）が使えるかどうかを確認しましょう。

以下、サンプルです。

例1：TABキーでフォーカスできなくなるCSS

See the Pen サンプル: キーボード操作で使えないcheckbox, radioボタン by Garyuten (@garyuten) on CodePen.

原因はチェックボックス、ラジオボタンの display:none です。
TABキーでのフォーカスが全く効かなくなります。
フォーム要素を非表示にするCSSは止めましょう。
(少なくてもMacモダンブラウザでは効かなくなる）

備考：tabindex属性付けたら？

結果フォーカスできるけど選択できません
（Mac: chromeで確認）

labelは対話型コンテンツなので tabindexを付けるとフォーカスは当たるようになりますが、spaceキー、リターンキーでもdisplay:noneしてるものにはチェックはできませんでした。
（JavaScriptで focus() とかで強引な力技はできるかも）

例2：TABキーでフォーカスできるCSS

See the Pen サンプル: キーボード操作ができるcheckbox, radioボタン by Garyuten (@garyuten) on CodePen.

少し強引ですがこれでTABフォーカスの対象になります。

input[type="radio"] ,
input[type="checkbox"] {
  /* 透明度0 */
  filter: alpha(opacity=0);
  -moz-opacity:0;
  opacity:0;
  /* ブラウザのデフォルトのスタイルを削除 */
  -webkit-appearance: none;
  appearance: none;
  /* レイアウトから無視 */
  position: absolute;
}

:focusではフォーカスしてるとわかりやすいCSSを当てること

input[type="radio"]:focus + .radio-icon,
input[type="checkbox"]:focus + .check-icon{
  box-shadow: 0 0 4px #004AA1;
}

個人的にradioやcheckboxのfocusには box-shadowがレイアウトに影響与えずにすのでオススメです。

他の有名なフレームワークではしっかりTABでフォーカス状態がわかりやすいです。
最近のCSSフレームワークはフォーカス時にJavaScriptで動的にclassを付与する傾向です。

追記 2020/12/15）
私のCSSでのフォーカス状態はMacでしか確認してないため、Windowsのedge、IE11では不完全な表現になっています。
Windowsまで考慮されている素晴らしい記事を うぇびん@webbingstudioさんが書かれてますので、フォーカス効果も検証されたい方はぜひこちら記事を参考にしてください。
アクセシビリティを考慮した、チェックボックスとラジオボタンのCSSのサンプル | ウェビンブログ

誰でも一時的ハンデを持つ可能性がある

• マウスが壊れたor電池切れた
• トラックパッドが壊れた
• 手を怪我してマウスを持てなくなった

こんな状態の方にも代替操作方法を提供しておくことが最低限のアクセシビリティだと思います。
その上でユーザビリティも高めていきましょう

まとめ

form要素をCSSで装飾したら、キーボード操作だけで使えるか絶対試すこと
最低でもTABキー叩くこと

p.s.
この内容は Accessibility Step Vol.01 - connpass でLT登壇しました