アクセシビリティを考慮したチェックボックスのCSSスタイリング

2023/12/04
コメントをいただき、Codepenのサンプルを更新しました。
@tsmd さん、コメントありがとうございました。

はじめに

チェックボックスの装飾する方法をちょっと検索してみるとinput[type="checkbox"]をdisplay: none;で非表示にしてlabelタグでチェックボックスをデザインする方法が多く引っかかってきます。しかし、この手法には深刻なアクセシビリティの問題が存在します。

input[type="checkbox"]にdisplay: none;を適用する問題点

スクリーンリーダーを使用するユーザーにとって、display: none;はチェックボックスが存在しないものとして認識されてしまうのです。これにより、ユーザーが操作を行う際に混乱が生じる可能性があります。

display: none;に代わる方法

アクセシビリティを重視した別のアプローチとして、通称visually-hiddenという方法が昔から使われています。これにより、視覚的にはチェックボックスが見えなくなりますが、スクリーンリーダーにはまだアクセス可能な要素として認識されます。これにより、視覚的なデザインを保ちつつ、アクセシビリティを向上させることができます。

例としてtailwindcssにある.sr-onlyというクラスのコードを見てみます。

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

input[type="checkbox"]に.sr-onlyを使用することで、視覚的に消えつつスクリーンリーダーに認識させることができます。

上記の方法を用いてスタイリングしたチェックボックスをサンプルとして置いておきます。