WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

SCR19: 状況の変化を引き起こすことのないように、select 要素の onchange イベントを使用する

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

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

適用(対象)

スクリプトをサポートするHTML及びXHTML。この達成方法では、JavaScript 1.4 の try/catch 構文を用いる。

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

ユーザエージェント及び支援技術によるサポート

SCR19 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、ウェブページの他の要素を更新するselect要素においてonchangeイベントを正しく使用する方法を示すことである。この達成方法は、状況の変化を引き起こさない。ウェブページに一つかそれ以上のselect要素があるとき、一方のonchangeイベントは、そのウェブページの別のselect要素における選択肢を更新できる。そして、select要素によって必要とされるデータのすべてが、ウェブページの中に含まれている。

ウェブページでの音声読み上げ順序において、選択によって変更されるアイテムが、トリガーとなるselect要素の後にあることに注意することが重要である。これは、支援技術が変化を察知するのを確実にし、変更されたアイテムがフォーカスされたとき、利用者は新しいデータを認識する。なお、この達成方法は、ユーザエージェントによるJavaScriptのサポート状況に依存する。

事例

事例 1

この事例には、2つのselect要素がある。最初のselect要素でアイテムが選択されたとき、二つめのselect要素の選択肢が適切に更新される。最初のselect要素には、大陸のリストがある。そして、二つめのselect要素には、選択された大陸に位置する国々の一部のリストがある。onchangeイベントは、大陸の選択に連動している。大陸の選択が変わると、国の選択肢は、ドキュメント・オブジェクト・モデル(DOM)を通してJavaScriptを用いて変更される。必要であるすべてのデータ、国と大陸のリスト、はウェブページの中に含まれている。

以下のコードの概要:

コード例:


<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  <head> 
    <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" /> 
    <title>動的なセレクトメニュー</title> 

<script type="text/javascript">
 //<![CDATA[ 
 // 国の選択項目のリストに現れるのと同じ順の選択可能な国の配列 
 var countryLists = new Array(4) 
 countryLists["empty"] = ["国を選択してください"]; 
 countryLists["North America"] = ["カナダ", "アメリカ合衆国", "メキシコ"]; 
 countryLists["South America"] = ["ブラジル", "アルゼンチン", "チリ", "エクアドル"]; 
 countryLists["Asia"] = ["ロシア", "中国", "日本"]; 
 countryLists["Europe"]= ["イギリス", "フランス", "スペイン", "ドイツ"]; 
 /* CountryChange() はselect要素のonchangeイベントから呼び出される。 
 * param selectObj - onchangeイベントで生成されるselectオブジェクト。
 */ 
 function countryChange(selectObj) { 
 // 選択された選択肢のインデックスを得る 
 var idx = selectObj.selectedIndex; 
 // 選択された選択肢の値を得る 
 var which = selectObj.options[idx].value; 
 // countryLists 配列から項目のリストを検索するために選択された選択肢の値を使う 
 cList = countryLists[which]; 
 // そのIDを通して国のselect要素を得る
 var cSelect = document.getElementById("country"); 
 // 国のリストから現在の選択肢を削除する 
 var len=cSelect.options.length; 
 while (cSelect.options.length > 0) { 
 cSelect.remove(0); 
 } 
 var newOption; 
 // 新しい選択肢を生成する 
 for (var i=0; i<cList.length; i++) { 
 newOption = document.createElement("option"); 
 newOption.value = cList[i];  // 選択肢の文字列と値は同じとする 
 newOption.text=cList[i]; 
 // 新しい選択肢を追加する 
 try { 
 cSelect.add(newOption);  // これはDOMをサポートするブラウザでは失敗するが、IEには必要 
 } 
 catch (e) { 
 cSelect.appendChild(newOption); 
 } 
 } 
 } 
//]]>
</script>
</head>
<body>
  <noscript>このページはJavaScriptが有効で、関数が正しく動作可能である必要があります。</noscript>

  <h1>動的なセレクトメニュー</h1>
  <label for="continent">大陸を選択</label>
  <select id="continent" onchange="countryChange(this);">
    <option value="empty">大陸を選択してください</option>

    <option value="North America">北米</option>
    <option value="South America">南米</option>
    <option value="Asia">アジア</option>
    <option value="Europe">ヨーロッパ</option>

  </select>
  <br/>
  <label for="country">国を選択</label>
  <select id="country">
    <option value="0">国を選択してください</option>

  </select>
</body>
 </html>

このコードの実装サンプル:動的なセレクトメニュー

参考リソース

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

(今のところ、なし。)

検証

チェックポイント

  1. トリガーとなるselect要素(この事例では、大陸を選択するセレクトメニュー)で、選択肢の値を変える。

  2. トリガーによって更新されたselect要素(この事例では、国を選択するセレクトメニュー)へ移動する。

  3. 適切な選択肢の値が、2. のselect要素に表示されている。

  4. 選択肢の値を変えることなく、1. のトリガーとなるselect要素へ移動する。

  5. 適切な選択肢の値が、関連付けられた要素(2. のselect要素)にまだ表示されている。

関連付けられた要素(2. のselect要素)の変化が認識されることを確かめるために、select要素を支援技術を用いて検証することが望ましい。

判定基準

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