スクリプトを持つHTML及びXHTML
これは、次の達成基準に関連する不適合事例である：
この不適合事例では、ユーザーインタフェース・コントロールを生成するために汎用的なHTML要素を用いたとき、どのようにしてコントロールが支援技術に対してアクセシブルでなくなるかを示している。コンポーネントについての情報を利用者に伝達する際、支援技術は、コンポーネントのロール及びカレント・ステートの情報に依存している。多くのHTML要素は、リンク、ボタン、テキストフィールドなどといった明確なロールを持っている。div 及び span などの汎用的な要素は、事前に定義されたロールがない。これらの汎用的な要素が、HTMLでユーザーインタフェース・コントロールを生成するために使用されると、支援技術は、コントロールを表現したり、コントロールとやり取りしたりするために必要な情報を得られないかもしれない。
完全にアクセシブルなユーザーインタフェース・コントロールを生成するための必要なロール及びステートについての情報を提供するメカニズムを記述している仕様へのリンクについては、下記の参考リソースの項目を参照のこと。
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に不適合となる。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
マークアップ内又はスクリプトにより割り当てられたイベント・ハンドラを持つ要素に対するソースコードを検証する。
これらの要素がユーザーインタフェース・コントロールの役割を果たす場合は、コントロールの役割（role）が定義されている。
2.を満たさず、生成されたユーザーインタフェース・コントロールが役割（role）の情報を持たない場合は、この不適合の条件が適用される。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。