Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

この記事で言いたいことは
ラジオボタン、チェックボックスをキーボード操作できなくなる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登壇しました

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away