CSS
HTML5
form
frontend
accessibility

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

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

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

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

フォーム系は必ずキーボード操作(特に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を付与する傾向です。

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

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

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

まとめ

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

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