Web活用備忘録

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

2009 年 5 月 27 日

アイタス制作木下

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

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


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


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

ラジオボタンサンプル

ラジオボタンサンプル


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

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


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

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


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

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

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


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


<木下@アイタス

このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

このエントリのキーワード:,

カテゴリー別一覧

 

キーワード

CMS アイタスの取り組み アイタスってなんだす 動画 Web活用 採用 書籍 セミナー・勉強会 Web施策に力を入れたい 新人スタッフ WordPressで企業サイト構築 Webサイト制作会社 実店舗への集客につなげたい ブランディング確立 魅力や特徴をわかりやすく伝えたい 講座 社内勉強会 ビジネスブログ 事業に活かしたい 企画立案