チェックボックス・ラジオボタンをtabキーで操作できるようにするCSS〜アクセシビリティ対応〜

チェックボックス・ラジオボタンをtabキーで操作できるようにするCSS〜アクセシビリティ対応〜

HTML・CSS

先日、コーディングをしていてチェックボックスをtab操作できるようにアクセシビリティ対応をする機会がありました。

その時の備忘録を踏まえ、codepenを使用してコードも記載したので、よかったら参考にしてくださいね!!

チェックボックスでdisplay:none;は使ってはいけない

「チェックボックス おしゃれ」とかでググっているそこのあなた、ちょっと待って!!!!

その参考にしようとしている記事、ラジオボタン、チェックボックスをdisplay:noneしようとしてません…?

こんなコードはアクセシビリティ的に要注意です!!!

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

「ええー、display:none;して何が悪いのさっ!別にいいじゃん!」と思うかもしれません。

結論からいうと、display:none;するとタブフォーカスができなくなります。

タブフォーカスができない=キーボード操作ができないということですね。

このままではアクセシビリティ的に良くありません。

つーかアクセシビリティって何よ、という方はまず以下の記事をご覧ください。

アクセシビリティを全く知らない人が理解できるようになる「 デザイニングWebアクセシビリティ」
こんにちは!管理人のあやかです。Web界隈のみなさま。「アクセシビリティ」ってご存知ですか?「アクセシビリティって言われてもふんわりしかわからないんだよね…」「…
ayaka-weblog.com

アクセシビリティ対応したチェックボックス

では本題です。以下がタブフォーカスに対応したコードです。

See the Pen checkbox by さえ (@sae1212) on CodePen.

こちらでタブフォーカスできます。

一番のポイントとしては、input[type=”checkbox”]にopacity:0;position: absolute;をかけているところです。

/* チェックボックスのデフォルトの状態を隠す */
input[type="checkbox"]{
  opacity:0; /* opacityで透過 */
  position: absolute; /* absoluteでレイアウトに関与させないようにさせる */
}

そのほかの擬似要素でチェックボックスを作っているところは、他の参考サイトと変わらないかなと思います。

参考にしたサイト

以下、私が参考にさせていただいたサイトです。

チェックボックスのアクセシビリティについてより詳しく書かれているので見てみてくださいね。

CSSでフォーム内の部品を装飾するのは、昔から難儀でした。特によく使うチェックボックスは色をつけることすら難しく、様々なCSSの小技やJavaScriptプラグ…
www.webcreatorbox.com
※ 2020/12/15 フォーカスについて一部追記、参考リンクを追加 ※ 2020/04/16 加筆、CSSの表現を一部修正しました この記事で言いたいことは…
qiita.com