フォーム
ラベルとコントロールのグループ化
label
のfor
属性値とコントロールのid
属性値は、formlabel-[任意の文字列]にしましょう。
都道府県
サンプルソース
<select name="" id="">
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="宮城県">宮城県</option>
<option value="福島県">福島県</option>
<option value="群馬県">群馬県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都" selected="selected">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="岐阜県">岐阜県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>
週
サンプルソース
<select name="" id="">
<option value="月曜日">月曜日</option>
<option value="火曜日">火曜日</option>
<option value="水曜日">水曜日</option>
<option value="木曜日">木曜日</option>
<option value="金曜日">金曜日</option>
<option value="土曜日">土曜日</option>
<option value="日曜日">日曜日</option>
</select>
月
サンプルソース
<select name="" id="">
<option value="1月">1月</option>
<option value="2月">2月</option>
<option value="3月">3月</option>
<option value="4月">4月</option>
<option value="5月">5月</option>
<option value="6月">6月</option>
<option value="7月">7月</option>
<option value="8月">8月</option>
<option value="9月">9月</option>
<option value="10月">10月</option>
<option value="11月">11月</option>
<option value="12月">12月</option>
</select>
日
サンプルソース
<select name="" id="">
<option value="1日">1日</option>
<option value="2日">2日</option>
<option value="3日">3日</option>
<option value="4日">4日</option>
<option value="5日">5日</option>
<option value="6日">6日</option>
<option value="7日">7日</option>
<option value="8日">8日</option>
<option value="9日">9日</option>
<option value="10日">10日</option>
<option value="11日">11日</option>
<option value="12日">12日</option>
<option value="13日">13日</option>
<option value="14日">14日</option>
<option value="15日">15日</option>
<option value="16日">16日</option>
<option value="17日">17日</option>
<option value="18日">18日</option>
<option value="19日">19日</option>
<option value="20日">20日</option>
<option value="21日">21日</option>
<option value="22日">22日</option>
<option value="23日">23日</option>
<option value="24日">24日</option>
<option value="25日">25日</option>
<option value="26日">26日</option>
<option value="27日">27日</option>
<option value="28日">28日</option>
<option value="29日">29日</option>
<option value="30日">30日</option>
<option value="31日">31日</option>
</select>
WCAG2.0から
WCAG2.0 Techniques for WCAG2.0の中で、label
を使って明示化できない場合には、title
を利用しましょうとありますので以下に事例を含めています。いつアップロードされるかわかりませんので、すべてを以下に記述しているとは限りません。一応参照ページの方にも目を通してみてください。
サイト内検索の範囲
サンプルソース
<label for="***">サイト内検索:</label>
<input type="text" name="***" id="***" ~ />
<select name="***" title="検索範囲">
…
</select>
電話番号(input
を3つに分ける場合)
サンプルソース
<input type="text" name="***" title="市外局番" ~ />-<input type="text" name="***" title="市内局番" ~ />-<input type="text" name="***" title="加入者番号" ~ />
サイト内検索(label
なし)
サンプルソース
<input type="text" name="***" title="検索キーワード" ~ />