適用 (対象)
HTML、XHTML 及び CSS
これは達成基準 1.4.4: テキストのサイズ変更 (失敗例) に関する達成方法である。
解説
この失敗例の条件の目的は、テキストのサイズ変更が、それに応じてテキストベースのフォームコントロールを拡大しない時に発生する問題を説明するものである。テキストは利用者が要求するテキストサイズで表示されないので、利用者がテキストの入力及び入力したものを読むのに苦労するかもしれないことを意味している。
テキストベースのフォームコントロールは、ボタンと同様に入力ボックス (テキスト及びテキストエリア) を含んでいる。
事例
事例 1: お問い合わせフォーム
お問い合わせフォームは、いくらかの前置き情報、及び利用者が名、姓、電話番号及び電子メールアドレスを入力するためのフォームコントロールがある。見出し、前置きのテキスト及びフォームコントロールのラベルは、拡張性のある方法で実装されているが、フォームのコントロール自体は拡張性のある方法では実装されていない。
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" />
The CSS component:
h1 { font-size: 2em; }
p, label { font-size: 1em; }
input {font-size: 12pt}検証
手順
- 利用者が入力したテキストを受け取るテキストベースのフォームコントロールにテキストを入力する。
- 200％までコンテンツのテキストサイズを拡大する。
- テキストベースのフォームコントロール内のテキストが 200％まで拡大したことを確認する。
期待される結果
- 3．の結果が偽である場合、失敗例の条件は適用され、コンテンツはこれらの達成基準の失敗となる。