チェックボックスやラジオボタンは、「閲覧環境によってデザインが変わってしまう」「サイトのデザインと合わない」といった理由からCSSでカスタマイズすることが多いと思います。 ただ、検索でよく見るカスタマイズ方法だと、inputタグをdisplay: none;で非表示にするので、フォーカスが当たらずキーボードでの操作ができなくなってしまうものが多いです(スクリーンリーダーの読み上げがされないこともあるそうです)。 キーボード操作の機能を残したまま、CSSでカスタマイズする方法を紹介します。 2017年9月8日補足 アクセシビリティの情報を発信されている「AccSell(アクセル)」のポッドキャストに取り上げていただきました。 第123回: 「音声ファーストインデックス」|ポッドキャスト|AccSell そこで以下のような点を指摘していただきました。 background-imageプロパティ