セレクトメニューの選択肢をグループ化できませんか? | |
JIS 5.3 b); | |
概要
Webページにフォームのセレクトメニューに3つ以上の選択肢(select要素内のoption要素)があります。もし、その選択肢を幾つかのグループに分けることができる場合は、optgroup要素を用いて選択肢が適切にグループ化されていることを確認してください。 |
|
修正/チェック方法
セレクトメニュー(ドロップダウン・メニュー)の選択肢(select要素内のoption要素)が多い場合は、optgroup要素でグループ化してください。 |
|
修正/チェックのポイント
|
|
JIS関連項目
|
|
解説
セレクトメニュー(ドロップダウン・メニュー)の選択肢が多すぎると、ユーザーはその中から選択するのが大変です。その数によっては、まず探し出すのに苦労するかもしれません。 optgroup要素を用いて、select要素内のoption要素で提供されている選択肢をグループ化することができます。ユーザーが長いセレクトメニュー(ドロップダウン・メニュー)の中からどれか1つを選択しなければならないときに、グループ化されていると選択がしやすくなります。optgroup要素を使うと、関連性のある選択肢を1つのグループにまとめて、そのグループにラベルを付けることが可能です。ユーザーは、選択肢がずらりと並んでいるだけの長いセレクトメニューよりも、容易に全体を把握して選択肢を見つけ出すことができるようになります。以下が、そのHTMLソースコード例です。 <select name="都道府県"> <optgroup label="関東"> <option label="東京" value="tokyo">東京</option> <option label="神奈川" value="kanagawa">神奈川</option> <option label="埼玉" value="saitama">埼玉</option> <option label="千葉" value="chiba">千葉</option> <option label="茨城" value="ibaraki">茨城</option> <option label="栃木" value="tochigi">栃木</option> <option label="群馬" value="gunma">群馬</option> <option label="山梨" value="yamanashi">山梨</option> ..... なお、このoptgroup要素は、旧いバージョンのブラウザではサポートされていませんが、optgroup要素が無視されて選択肢がグループ化されないだけで、ユーザーが閲覧する上では何ら支障はありません。また、サポートしているブラウザでもその種類によって、画面での表示も異なるのが現状です。しかし、そういったブラウザのサポート状況や表示の差異にとらわれることなく、数の多い選択肢をグループ化して、その構造をマークアップしておくことが重要です。 |
|
JIS X 8341-3について
JIS X 8341-3 の内容は、以下のサイトにて規格番号「X8341-3」で検索して、規格票をご覧ください。
|