input [type = "radio"], input [type = "checkbox"] {display: none;} テックノート – ユーザビリティのよいチェックボックス・ラジオボタンのCSS見本53選！ で紹介されてる中でもキーボード操作できるのは10個もありませんでした。 アクセシビリティのために非表示（にする場合は、display:noneや、visibility:hiddenを使用するのではなく、clipプロパティが一般的です。 display:noneは、クリックしたら表示するといった表現によく使われると思いますが、html5のdetail要素を使っても、トグルアクションを作ることが出来ます。 inputタグのcheckboxを使いやすくする為にCSSで装飾する事、あると思います。押しやすくしたり、視認性を高めたり、操作性を向上させる事は良い事ですが、引き換えにアクセシビリティが損なわれる事もあります。この記事ではそのアクセシビリ display は CSS のプロパティで、要素の表示種別を指定し、これは要素がボックスを生成する方法の二つの基本的な品質から成ります。 — 外部表示種別はボックスがフローレイアウトにどのように加わるのかを定義し、内部表示種別はボックスの子がどのように配置されるのかを定義します。 ラジオボタンやチェックボックスのデザインを調整するために input タグのデフォルトの見た目を消したくなりますよね。 appearance: none; を使えばデフォルトの見た目を消せますが、IE11が未対応なのでIE11をサポートする場合には使えません。 display: none;の問題(1) アクセシビリティ display: none;を使う際のアクセシビリティに関する問題点、および改善方法は、以下の記事にて、非常に分かりやすく記述されています。CSS実装は非常に参考にさせて頂きました。ありがとうございます。 アクセシビリティで気をつけるchecbox,radioのCSS フォームはサイトにはかならず必要になってくるアイテムですが、わかりやすく間違えにくいものにしたいですよね。 わかりやすくていい感じのセレクトボックスを集めました。 inputをdisplay:none;するとアクセシビリティ下がる. 今回は、ラジオボタンのデザインををhtmlとcssのサンプルと共にご紹介します。汎用的なデザインを集めているのでフォームのコーディングやデザインの際にコピペして利用すると使い勝手もよく便利です。フロントエンド初学者でもカスタマイズしてコードを再利用できます。