WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

F59: 達成基準 4.1.2 の失敗例 - コントロールに役割 (role) を提供せずに、HTML の div 要素又は span 要素をユーザインタフェースコントロールにするために、スクリプトを用いている

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

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

適用 (対象)

HTML 及び XHTML

これは、次の達成基準に関連する失敗例である:

解説

この失敗例では、ユーザインタフェースコントロールを生成するために汎用的な HTML 要素を用いたとき、どのようにしてコントロールが支援技術に対してアクセシブルでなくなるかを示している。コンポーネントについての情報を利用者に伝達する際、支援技術は、コンポーネントのロール及びカレントステートの情報に依存している。多くの HTML 要素は、リンク、ボタン、テキストフィールドなどといった明確なロールを持っている。div 及び span などの汎用的な要素は、事前に定義されたロールがない。これらの汎用的な要素が、HTML でユーザインタフェースコントロールを生成するために使用されると、支援技術は、コントロールを表現したり、コントロールとやり取りしたりするために必要な情報を得られないかもしれない。

通常、インタラクティブではない要素 (spandiv など) にイベントハンドラを設定すると、利用者に混乱を招く可能性がある。そのような要素へのキーボードアクセスを提供することに注意が払われても、利用者はコンテンツにインタラクティブなコントロールを見つけたり、その要素の振る舞いを理解することが困難な場合がある。たとえば、利用者が要素をアクティブにするためにスクリプトでサポートされているキーストロークがわからない場合がある。さらに、これらの要素はインタラクティブ要素と同じオペレーティングシステムイベントを生成しないため、利用者がそれらをアクティブにしても支援技術に通知されないことがある。

W3C 勧告の「Accessible Rich Internet Applications (WAI-ARIA) 1.0」は、完全にアクセシブルなユーザインターフェイスコントロールを作成するために必要な役割 (role) と状態 (state) の情報を提供するメカニズムについて説明する。

事例

失敗例 1

span 及び画像を使用したチェックボックスを生成するため、下記の事例は不適合となる。


  <p> 
  <span  onclick="toggleCheckbox('chkbox')"> 
  <img src="unchecked.gif"  id="chkbox" alt=""> 署名を含む
  </span> 
  </p>

これは、マウスで span をクリックする時に、画像のソースを変更するスクリプトコードである。


  var CHECKED = "check.gif"; 
  var UNCHECKED = "unchecked.gif"; 
  function toggleCheckbox(imgId) { 
  var theImg = document.getElementById(imgId); 
  if ( theImg.src.lastIndexOf(CHECKED)!= -1 ) { 
  theImg.src = UNCHECKED; 
  // チェックをはずすアクションを実装するための追加コード
  } 
  else { 
  theImg.src = CHECKED; 
  // チェックをつけるアクションを実装するための追加コード
  } 
  }

このような方法で生成されたチェックボックスは、チェックボックスとして識別する情報がないため、支援技術では機能しない。加えて、この事例はキーボードからも操作できず、ガイドライン 2.1 に不適合となる。

参考リソース

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

検証

手順

  1. 解析されたソースコードで、マークアップ内またはスクリプトを介して割り当てられたイベントハンドラを持つ要素 (ユーザインターフェイスコントロールであることを示す要素) を検証する。

  2. コントロールの役割 (role) がマークアップ言語でネイティブに定義されているかどうかを確認する。

  3. 適切な WAI-ARIA の役割 (role) の割り当てのように、他の有効なメソッドを使用してコントロールの役割 (role) を定義しているかどうかを確認する。

期待される結果

2. 及び 3. を満たしていないのであれば、失敗条件が適用される。