WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

H84: アクションを実行するために、select 要素とボタンを併用する

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

HTML 及び XHTML

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、select要素の値を選択することで意図せずアクションが実行されるのではなく、アクションの実行を利用者が制御できるようにすることである。利用者は、アクションが実行されるとは思わずに、select要素にどんな値があるのかを調べたり、間違って意図しない値を選んだりするかもしれない。利用者が自分の選択に納得したとき、アクションを実行するボタンを選択できるようにする。

select要素の選択肢の操作によって(フォームの)コントロールの値が変化する場合、キーボードでselect要素の値を選んでいる利用者に対して特に重要である。

事例

事例 1: カレンダー

あるウェブページでは、利用者が任意の年の任意の月を選ぶと、その月のカレンダーが表示される。利用者が月と年を指定した後に「表示」ボタンを押すことでカレンダーが表示される。この例では、クライアントサイド・スクリプティングでアクションを実装している。

コード例:

<label for="month">月:</label>
<select name="month" id="month">
  <option value="1">1月</option>

  <option value="2"> 2月</option>
  ...
  <option value="12">12月</option>
</select> 
<label for="year">年:</label>

<input type="text" name="year" id="year">
<input type="button" value="Show" onclick = "..."> 

事例 2: アクションを選ぶ

select 要素は実行可能なアクションのリストを含んでいる。利用者が「実行」というボタンを押すまで、アクションは実行されない。

コード例:

<form action="http://somesite.com/action" method="post">
  <label for="action">選択肢:</label>
  <select name="action" id="action">
    <option value="help">ヘルプ</option>

    <option value="reset">リセット</option>
    <option value="submit">送信</option>
  </select> 
  <button type="submit" name="submit" value="submit">実行 </button>

</form> 

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

それぞれの select 要素/ボタンの要素の組み合わせに対して:

  1. select 要素の選択肢にフォーカスがあたったとき(キーボード・フォーカスを含む)、どのアクションも実行されない。

  2. ボタンを選択すると、現在の select 要素の値に関連付けられたアクションが実行される。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。