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

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

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

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

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

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

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

- [チェックボックスをおしゃれにするCSSスニペット25選。アニメーションが刺さる！ | KodoCode](https://kodocode.net/design-css-checkbox/) 
- [ラジオボタンをおしゃれにするCSSスニペット16選。ポチッ！で感動をお届け。 \| KodoCode](https://kodocode.net/design-css-radiobutton/)

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

以下、サンプルです。


# 例1：TABキーでフォーカスできなくなるCSS
<p data-height="1000" data-theme-id="0" data-slug-hash="BPvxZO" data-default-tab="result" data-user="garyuten" data-pen-title="サンプル: キーボード操作で使えないcheckbox, radioボタン" class="codepen">See the Pen <a href="https://codepen.io/garyuten/pen/BPvxZO/">サンプル: キーボード操作で使えないcheckbox, radioボタン</a> by Garyuten (<a href="https://codepen.io/garyuten">@garyuten</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

## 備考：tabindex属性付けたら？

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

[labelは対話型コンテンツ](https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories#Interactive_content)なので tabindexを付けるとフォーカスは当たるようになりますが、spaceキー、リターンキーでも`display:none`してるものにはチェックはできませんでした。
（JavaScriptで focus() とかで強引な力技はできるかも）

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

<p data-height="600" data-theme-id="0" data-slug-hash="BPvVzX" data-default-tab="result" data-user="garyuten" data-pen-title="サンプル: キーボード操作ができるcheckbox, radioボタン" class="codepen">See the Pen <a href="https://codepen.io/garyuten/pen/BPvVzX/">サンプル: キーボード操作ができるcheckbox, radioボタン</a> by Garyuten (<a href="https://codepen.io/garyuten">@garyuten</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

```css

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を当てること

```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](https://twitter.com/webbingstudio/status/1215939605960118272)さんが書かれてますので、フォーカス効果も検証されたい方はぜひこちら記事を参考にしてください。
[アクセシビリティを考慮した、チェックボックスとラジオボタンのCSSのサンプル \| ウェビンブログ](https://webbingstudio.com/weblog/entry-881.html)

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

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

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

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



p.s.
この内容は [Accessibility Step Vol\.01 \- connpass](https://a11ystep.connpass.com/event/96310/) でLT登壇しました