CSS、HTML及びXHTML
これは、次の達成基準に関連する実装方法である：
Windows版のInternet Explorer 6.0とそれ以前のバージョンでは、ハイパーリンクの要素を除いてダイナミック疑似クラスをサポートしていない。Internet Explorer 7 は、ハイパーリンクの要素を除いて:focusスタイルをサポートしていない。Internet Explorerの(X)HTMLのリンク（a要素）において:focusと同じ効果を出すには、CSSの:active疑似クラスを追加すればよい。
Windows版のFirefox 1.5とFirefox 2.0、SeaMonkey 1.1は、1行の入力フィールド、複数行の入力フィールド、ラジオボタン、チェックボックス、select要素、送信／リセットボタン及びbutton要素においてダイナミック疑似クラスをサポートしている。しかし、ラジオボタンやチェックボックスがフォーカスを受け取ったときに色やボーダーを変更することには対応していない。
Windows版のOpera 9.02は、1行の入力フィールド、複数行の入力フィールド、ラジオボタン、チェックボックス、select要素、送信／リセットボタンにおいてダイナミック疑似クラスをサポートしているが、button要素ではサポートしていない。
Windows版のFirefox 2.0とOpera 9.02、SeaMonkey 1.1は、フォームのラベルに対する隣接兄弟セレクタにも対応している。Windows版のFirefox 1.5、Internet Explorer 6.0とそれ以前のバージョンは、フォームのラベルに対する隣接兄弟セレクタには対応していない。
この実装方法の目的は、インタラクティブな要素がフォーカスされたとき、又は利用者がポインティングデバイスを使ってカーソルを上にのせたときに、スタイルシートを使って視覚的なフィードバックを返すようにすることで視覚表現がどれだけ強調されるのかを示すことである。 フォーカスされた要素又はカーソルが上にのせられた要素をハイライトすることで、その要素がインタラクティブであること、又はインタラクティブな要素の範囲内であるなどの情報を提供することができる。
複数のモードに対して視覚的なフィードバックを返すことが可能な場合もある。通常、それは要素の上にカーソルをのせるためにマウスを使ったり、又は要素にタブで移動するためのキーボードを使ったりする場合である。
この事例では、マウスやキーボードによってフォーカスされたことを示すスタイルが、リンク部分の要素に適用される。リンク部分の要素がフォーカスを受け取ったときに背景色を適用するために、CSSが使用されている。
表示されるコンテンツは次の通り：
コード例：
<ul id="mainnav">
<li class="page_item">Home</li>
<li class="page_item"><a href="/services">サービス</a></li>
<li class="page_item"><a href="/projects">プロジェクト</a></li>
<li class="page_item"><a href="/demos">デモ</a></li>
<li class="page_item"><a href="/about-us">会社概要</a></li>
<li class="page_item"><a href="/contact-us">問合せ先</a></li>
<li class="page_item"><a href="/links">関連リンク</a></li>
</ul>マウス又はキーボードでフォーカスを受け取ったときに、上記要素の背景色を変更するCSSは次の通り：
コード例：
#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
background-color: #DCFFFF;
color:#000066;
}この事例では、背景色を変更することによって、フォーカスを受け取ったときに入力フィールドのスタイルを変更するために:focus疑似クラスが使用されている。
コード例：
<html>
<head>
<style type="text/css">
input.text:focus {
background-color: #7FFF00; color: #000;
}
input[type=checkbox]:focus + label, input[type=radio]:focus + label {
background-color: #FF6: color: #000;
}
</style>
</head>
<body>
<form method="post" action="form.php">
<p><label for="fname">名前: </label>
<input class="text" type="text" name="fname" id="fname" />
</p>
<p>
<input type="radio" name="sex" value="male" id="sm" /> <label for="sm">男性</label><br />
<input type="radio" name="sex" value="female" id="sf" /> <label for="sf">女性</label>
<p>
</form>
</body>
</html>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
フォーカスを得られる各要素に対して：
マウスを使って要素の上にカーソルをのせる。
背景又はボーダーの色が変化する。
キーボードでフォーカスを与える前に、マウスを動かして対象からカーソルを外す。
キーボードを使って、対象の要素にタブ移動する。
背景又はボーダーの色が変化する。
その要素がフォーカスを失ったとき、背景又はボーダーの色が元に戻る。
上記、2, 5 及び 6 を満たしている。
注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。