Webフォームのチェックボックスは、見た目をカスタマイズしたい場面が多々あります。しかし、そのカスタマイズが原因で、キーボードのTabキーによる操作ができなくなることがあるのです。この記事では、そのような状況の原因と、それに対する対処法を紹介します。
カスタムデザインの罠
デフォルトのチェックボックスを美しくカスタマイズしたくなるのは理解できます。しかし、display: none;を使って元のチェックボックスを非表示にすると、予想外の問題に直面します。
問題の原因 display: none;の影響
display: none;を使用すると、要素は完全にページから削除され、キーボードでの操作もできなくなります。
シンプルなHTML構造の紹介
<label class="checkbox-container">
<input type="checkbox" class="checkbox-input">
<span class="checkmark"></span>
</label>セマンティックなHTML構造は、アクセシビリティの基本です。この構造を使えば、マウスだけでなくキーボードからも容易に操作が可能です。
対処法 CSSの再設計
.checkbox-container {
position: relative;
padding-left: 35px;
cursor: pointer;
font-size: 22px;
user-select: none;
}
.checkbox-input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #ccc;
border-radius: 4px;
}
.checkbox-container:hover .checkmark {
background-color: #f1f1f1;
}
.checkbox-input:checked + .checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.checkbox-input:checked + .checkmark:after {
display: block;
}
.checkbox-input:focus + .checkmark {
box-shadow: 0 0 5px rgba(0, 0, 255, 0.3);
}
.checkmark:after {
left: 9px;
top: 5px;
width: 7px;
height: 13px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}ここでのポイントは、チェックボックスのinput要素をopacity: 0;に設定して視覚的には非表示にし、position: absolute;でページレイアウトからも取り除くことです。これにより、要素は画面上には見えませんが、実際にはページに存在し、キーボードでの操作も可能です。
また、span要素にcheckmarkクラスを割り当て、これをカスタムチェックマークのデザインとして使用します。checkbox-input:checked + .checkmark:afterのようなCSSの兄弟セレクタを使って、チェックボックスがチェックされたときのスタイルを制御します。
さらに、checkbox-input:focus + .checkmarkで、チェックボックスがフォーカスを受けたときにbox-shadowを適用し、アクセシビリティを向上させます。
これで、カスタムデザインのチェックボックスが完成し、キーボードでの操作も可能です。このチェックボックスは、Tabキーを押してフォーカスを移動し、Spaceキーを押して選択・解除できます。
まとめ 美しさと操作性を両立させる
この記事で紹介した方法を用いれば、チェックボックスのデザインを自由にカスタマイズしながら、その操作性を損なうことなく、すべてのユーザーにとって使いやすいフォームを作成することができます。
