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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

参考にしたサイト

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

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