【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
(X)HTML, CSS
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、ユーザエージェントによってテキストサイズが変更されたとき、テキストベースのフォームコントロールのサイズ変更を確かにすることである。これは、利用者によって必要とされるサイズでテキストが表示されるため、利用者がテキストを登録し、そして何を入力ボックスに登録したかを読むことができるであろう。
テキストベースのフォームコントロールは、ボタンと同様に入力ボックス (テキスト及びテキストエリア) を含んでいる。
お問い合わせフォームには、いくつかの初歩的な情報があり、利用者が自分の姓と名、電話番号、電子メールアドレスを入力するフォームコントロールがある。すべてのテキスト及びフォームコントロールは、拡大縮小可能な方法で実装されている。これは、Internet Explorer でフォントサイズが継承されていないため、フォームコントロール自体のフォントサイズを指定することも含まれる。
XHTML コンポーネント:
コード例:
<h1>Contact Us</h1>
<p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
<label for="fname">First Name</label><input type="text" name="fname" id="fname" /><br />
<label for="lname">Last Name</label><input type="text" name="lname" id="lname" /><br />
<label for="phone">Telephone</label><input type="text" name="phone" id="phone" /><br />
<label for="email">Email</label><input type="text" name="email" id="email" /><br />
<input type="submit" name="Submit" value="Submit" id="Submit" />CSS コンポーネント:
コード例:
h1 { font-size: 2em; }
p, label, input { font-size: 1em; }このコードの使用例: CSS によって入力のサイズを変更する例。
この事例は、テキストサイズ機能のある IE で動作する。しかしながら、Firefox 2.0 では拡大縮小されない。
XHTML コンポーネント:
コード例:
<input type="radio" name="r1" value="r1" id="r1" class="geomsize" />
<input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" />CSS コンポーネント:
コード例:
input.geomsize {
width: 1.2em;
height: 1.2em;}このコードの使用例: CSS によってラジオボタンとチェックボックスのサイズを変更する例。
利用者が入力したテキストを受け取るテキストベースのフォームコントロールにテキストを入力する。
コンテンツのテキストサイズを 200 ％まで増加させる。
テキストベースのフォームコントロールのテキストが 200 ％まで増加していることを確認する。
3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。