WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

F80: 達成基準 1.4.4 の失敗例 - 視覚的に描画されたテキストを 200%まで拡大していく際に、テキストベースのフォーム・コントロールのサイズが変更されない

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

HTML、XHTML及びCSS

これは、次の達成基準に関連する失敗例である:

解説

この不適合の条件の目的は、テキストのサイズ変更が、それに応じてテキストベースのフォーム・コントロールを拡大しない時に発生する問題を説明するものである。テキストは利用者が要求するテキストサイズで表示されないので、利用者がテキストの入力及び入力したものを読むのに苦労するかもしれないことを意味している。

テキストベースのフォーム・コントロールは、ボタンと同様に入力ボックス(テキスト及びテキストエリア)を含んでいる。

事例

失敗例 1: お問い合わせフォーム

お問い合わせフォームは、いくらかの前置き情報、及び利用者が名、姓、電話番号及び電子メールアドレスを入力するためのフォーム・コントロールがある。見出し、前置きのテキスト及びフォーム・コントロールのラベルは、拡張性のある方法で実装されているが、フォームのコントロール自体は拡張性のある方法では実装されていない。

XHTMLコンポーネント:

コード例:


<h1>お問い合わせ</h1>
 <p>あなたの個人情報をご記入いただければ、できるだけ早くご連絡いたします。なお、すべての入力項目が必須項目となっております。</p>
 <label for="fname">名</label><input type="text" name="fname" id="fname" /><br />
 <label for="lname">姓</label><input type="text" name="lname" id="lname" /><br />
 <label for="phone">電話</label><input type="text" name="phone" id="phone" /><br />
 <label for="email">電子メール</label><input type="text" name="email" id="email" /><br />
 <input type="submit" name="Submit" value="送信" id="Submit" />

CSS:

コード例:


h1 { font-size: 2em; }
 p, label { font-size: 1em; }
 input {font-size: 12pt}

参考リソース

この達成方法に関する参考リソースはない。

(今のところ、なし。)

検証

チェックポイント

  1. 利用者が入力したテキストを受け取るテキストベースのフォーム・コントロールにテキストを入力する。

  2. 200%までコンテンツのテキストサイズを拡大する。

  3. テキストベースのフォーム・コントロール内のテキストが200%まで拡大したことを確認する。

判定基準