WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

C17: テキストを含むフォームの要素を拡大する

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

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

適用(対象)

(X)HTML, 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, input { font-size: 1em; }

このコードの使用例: CSS によって入力のサイズを変更する例

事例 2: ラジオボタン

この事例は、テキストサイズ機能のある 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 によってラジオボタンとチェックボックスのサイズを変更する例

検証

チェックポイント

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

  2. コンテンツのテキストサイズを 200 %まで増加させる。

  3. テキストベースのフォームコントロールのテキストが 200 %まで増加していることを確認する。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。