ラジオボタン選択を少しだけ使いやすくする小さな取り組み

Web活用備忘録

アイタス制作木下

こんにちは。アイタス制作の木下です。

ある案件で、外部のフォームプログラムを設置するという作業をおこないました。

その際、提供元から配布されたフォームプログラムの一部に、複数項目からひとつを選ぶためのラジオボタンがありました。

※下記の画像は、実際の案件で設置したものとは別ですが、複数項目のあるラジオボタンのサンプルです。

ラジオボタンサンプル

実際の作業で設置したフォームプログラムのラジオボタンには、初期状態でラベル要素がついていませんでした。

そのため、項目を選択するためには、ラジオボタンのチェックマークが入る丸い部分をクリックして選択する必要がありました（テキストクリックでは項目が選ばれないため、クリックできる範囲がせまく、やや使いにくい印象でした）。

そこで、使い勝手を良くするためにラベル要素をつけて、文字部分がクリックされた場合にもラジオボタンにチェックされるように、修正をおこないました。

これによってクリックできる範囲が大きくなり、項目を選びやすくなりました。

下記の画像は、ラベル設定をおこなったアイタスお問い合わせフォームのラジオボタンのサンプルです（テキストをクリック時にその項目が選択される動きを試すことができます）。

ラベル要素を設定することで、チェックマーク（丸部分）ではなく、テキスト部分をクリックしても項目が選択されます

ひとつひとつは小さなことですが、使いやすいサイトにするためには、こういった小さな配慮の積み重ねが重要だと認識し、改善していきたいと思います。

＜木下＠アイタス＞