blog.鶯梭庵

二〇一三年神無月卅一日木曜日

■ CSS だけでアクセシブルなラジオボタンとチェックボックス [/links]

この記事は書かれてから1年以上経過しています。内容が古くなっている可能性があります。コメントの受付は終了しました。

HTML のラジオボタンとチェックボックスはブラウザによって外見が大きく違う。それを統一しようと思った場合、本格的にするなら jQuery のプラグインを使ったりすればよいのだけれど、それほど大がかりにせずに CSS だけで外見を統一する方法を考えた。CSS3 を使えば、JavaScript はいらない（ただし、IE8 以前には対応しない）。

基本的な考え方は、Styling checkboxes and radio buttons using CSS に書かれている通り。本来のラジオボタンやチェックボックスを opacity: 0; で透明にして隠し、label 要素の margin-left を負の値にして、本来のボタンの上にカスタムボタンをかぶせる。

本来のボタンを display: none; で隠すというコードを紹介しているウェブページが多いが、その方法には致命的な欠陥がある。ボタンをキーボードで操作できなくなるのだ。-webkit-appearance: none; を使っている例もあるが、これは当然 Webkit 系のブラウザ（Chrome や Safari など）でしか有効でない。

上記のページでは、ボタンの外見を画像で作って、その画像を label 要素の背景にしている。しかし、アクセシビリティを考えたら、文字を大きくしたときにボタンも比例して大きくなるほうがよい。(それに、画像を用意するのは面倒だ。）

最小限必要な HTML は概ね以下の通り。

<p><input type="radio" id="radio"><label for="radio">ラジオボタン</lable></p>

<p><input type="checkbox" id="checkbox"><label for="checkbox">チェックボックス</lable></p>

まずは本来のボタンのスタイルを指定する。幅をカスタムボタンと同じにした上で、透明にして隠す。

input[type="radio"],

input[type="checkbox"]{

font-size: 100%;

width: 1em;

margin: 0;

padding: 0;

opacity: 0;

}

次に、カスタムボタンを作って上にかぶせる。色はお好みで。border-width は、フォントサイズが 16 ピクセルのときに 3 ピクセルになるようにしている。margin-top と margin-right は位置調整なのでお好みで。

input[type="radio"]+label:before,

input[type="checkbox"]+label:before{

display: inline-block;

content: "";

vertical-align: top;

background-color: white;

color: black;

border-style: solid;

border-width: 0.1875em;

width: 0.625em;

height: 0.625em;

margin-left: -1em;

margin-top: 0.25em;

margin-right: 0.25em;

}

input[type="radio"]+label:before{

border-radius: 0.5em;

}

input[type="checkbox"]+label:before{

border-radius: 0.1875em;

}

そして、チェックしたときのスタイルを指定する。

input[type="radio"]:checked+label:before,

input[type="checkbox"]:checked+label:before{

border-style: double;

border-width: 0.5em;

width: 0;

height: 0;

}

チェックボックスは次のようにしてもよい。

input[type="checkbox"]:checked+label:before{

content: "\2714";

line-height: 0.625;

}

フォーカス時のスタイルを指定するのも忘れずに。

input[type="radio"]:focus+label:before,

input[type="checkbox"]:focus+label:before{

outline: 1px dotted;

}

outline ではなく box-shadow を使うと、アウトラインをぼかすことができる。色や太さはお好みで。

input[type="radio"]:focus+label:before,

input[type="checkbox"]:focus+label:before{

box-shadow: 0 0 1px 2px orange;

}

以下で動作を確認できる。マウスでもキーボードでも操作できること、ボタンの大きさがフォントサイズに比例していることに注意してほしい。ただし、繰り返しになるが、IE8 以前には対応しない。

[このカテゴリをまとめて読む。] [最新の記事を読む。]

羽鳥公士郎

blog.鶯梭庵

二〇一三年 神無月 卅一日 木曜日

■ CSS だけでアクセシブルなラジオボタンとチェックボックス [/links]

カテゴリ

最新記事

二〇一三年神無月卅一日木曜日