HTML及びXHTML、スクリプト
これは、次の達成基準に関連する実装方法である：
この実装方法の目的は、Document Object Model（DOM）に挿入されたユーザーインタフェースの要素をタブ順序及びスクリーンリーダーの読み上げ順序がユーザーエージェント標準のふるまいによって正しく設定されるような方法で配置することである。この実装方法は、メニューやダイアログのように隠れているものと表示されているもの、全てのユーザーインタフェース要素に利用することができる。
スクリーンリーダーの読み上げ順序は、Document Object Model内のHTML又はXHTMLの要素の順序に基づいており、それはタブ順序についても同様である。この実装方法では、新しいコンテンツをDOMのそのトリガーとなる要素の直後に挿入する。トリガーとなる要素は、リンク又はボタンでなければならず、スクリプトはそのonclickイベントにより呼び出されなければならない。これらの要素はもともとフォーカス可能であり、そのonclickイベントはデバイスに依存しない。フォーカスは選択された要素に残り、その後に挿入された新しいコンテンツは、タブ順序及びスクリーンリーダーの読み上げ順序の両方において、次の順番となる。
この実装方法は同期された更新にも利用できることに注目して欲しい。（AJAXと呼ばれることのある）非同期の更新では、支援技術に非同期のコンテンツが挿入されたことを通知するために追加の実装方法が必要となる。
この例では、リンクがクリックされた際にメニューを生成し、そのリンクの後に挿入する。リンクのonclickイベントは新しいメニューのためのIDをパラメータとして渡すShowHideスクリプトを呼び出すために使用される。
コード例：
<a href="#" onclick="ShowHide('foo',this)">切り替え</a>ShowHideスクリプトは新しいメニューを含むdivを生成し、リンクを挿入する。最終行がスクリプトの核心となる。スクリプトのトリガーとなる要素の親を探し、新しい子として生成されたdivをそれに追加する。これにより、新しいdivはDOM内でリンクの次になる。利用者がタブを押したときには、フォーカスがメニュー内で最初のフォーカス可能な項目となる生成されたリンクに移動する。
コード例：
ShowHide関数(id,src)
{
var el = document.getElementById(id);
if (!el)
{
el = document.createElement("div");
el.id = id;
var link = document.createElement("a");
link.href = "javascript:void(0)";
link.appendChild(document.createTextNode("Content"));
el.appendChild(link);
src.parentElement.appendChild(el);
}
else
{
el.style.display = ('none' == el.style.display ? 'block' : 'none');
}
}CSSはdivおよびリンクをメニューのように見せるために利用される。
ポップアップではないダイアログのトリガーとなる全てのエリアを探す。
そのダイアログがボタン又はリンクのクリックイベントによりトリガーされる。
スクリプトによって生成されたDOMを調査できるツールを使って、ダイアログがDOM内で次の位置にきている。
2.及び3.を満たしている。
注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。