チェックボックスやラジオボタンは、「閲覧環境によってデザインが変わってしまう」「サイトのデザインと合わない」といった理由からCSSでカスタマイズすることが多いと思います。 ただ、検索でよく見るカスタマイズ方法だと、inputタグをdisplay: none;で非表示にするので、フォーカスが当たらずキーボードでの操作ができなくなってしまうものが多いです(スクリーンリーダーの読み上げがされないこともあるそうです)。 キーボード操作の機能を残したまま、CSSでカスタマイズする方法を紹介します。 2017年9月8日補足 アクセシビリティの情報を発信されている「AccSell(アクセル)」のポッドキャストに取り上げていただきました。 第123回: 「音声ファーストインデックス」|ポッドキャスト|AccSell そこで以下のような点を指摘していただきました。 background-imageプロパティ
![キーボード操作もできるアクセシブルなチェックボックスとラジオボタンをCSSでカスタマイズする | Tips Note by TAM](https://cdn-ak-scissors.b.st-hatena.com/image/square/ab6b657dcec9ab8032815cd3f537754c20e02b11/height=288;version=1;width=512/https%3A%2F%2Fwww.tam-tam.co.jp%2Ftipsnote%2Fwpdata%2Fwp-content%2Fuploads%2F2017%2F08%2FCheckbox-and-radio-button-that-can-also-use-keyboard-operation-1024x538.jpg)