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

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

HTML 及び XHTML

これは達成基準 4.1.2: 名前 (name)・役割 (role)・値 (value) (失敗) に関する達成方法である。

解説

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

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

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

訳注

「Accessible Rich Internet Applications (WAI-ARIA) 1.0」は、正しくは「Accessible Rich Internet Applications (WAI-ARIA) 1.1」となる。

事例

例 1

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

  <p> 
  <span  onclick="toggleCheckbox('chkbox')"> 
  <img src="unchecked.gif"  id="chkbox" alt=""> Include Signature 
  </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; 
  // additional code to implement unchecked action 
  } 
  else { 
  theImg.src = CHECKED; 
  // additional code to implement checked action 
  } 
  } 

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

参考リソース

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

訳注

「Accessible Rich Internet Applications (WAI-ARIA) 1.0」「WAI-ARIA 1.0 Authoring Practices」はそれぞれ、正しくは「Accessible Rich Internet Applications (WAI-ARIA) 1.1」「WAI-ARIA Authoring Practices 1.1」となる。

検証

手順

  1. 解析されたソースコードで、マークアップ内又はスクリプトを介して割り当てられたイベントハンドラを持つ要素 (ユーザインタフェースコントロールであることを示す要素) を検証する。
  2. コントロールの役割 (role) がマークアップ言語でネイティブに定義されているかどうかを確認する。
  3. 適切な WAI-ARIA の役割 (role) の割り当てのように、他の有効なメソッドを使用してコントロールの役割 (role) を定義しているかどうかを確認する。

期待される結果

#2 及び #3 の結果が偽である場合、失敗条件が適用される。