適用 (対象)
CSS
これは、次の達成基準に関する達成方法である:
- 達成基準 1.4.4: テキストのサイズ変更 (書かれていない達成方法を満たす手段として十分)
- 達成基準 1.4.12: テキストの間隔 (参考)
解説
この達成方法の目的は、テキストを含むボックス又はテキストの入力を受け付けるボックスの幅及び又は高さを、em 単位を用いて指定することである。これによって、文字サイズを変更できるユーザエージェントは、文字サイズの設定の変更に連動させてテキストを含むボックスの大きさも変更できるようになる。
テキストを含むボックスの幅及び又は高さを他の単位を使って指定していると、文字サイズの拡大によってテキストがボックスに入りきらなくなり、その一部が見えなくなってしまう危険性がある。
大枠のボックス (コンテナ) は、一般にウェブページ内のテキストの配置をコントロールし、そこにはレイアウトのための要素と構造を示す要素、及びフォームのコントロールを含むことができる。
事例
例 1: テキストを含むレイアウト用のボックスのサイズに em 単位を使う
この事例では、ウェブページのメインコンテンツ領域の左側にナビゲーションメニューを配置するために、id 属性の値として「nav_menu」を指定した div 要素を使用している。ナビゲーションメニューは、id 属性の値として「nav_list」を指定したテキストリンクのリストで構成されている。ナビゲーションのリンクを含むコンテナの幅は em 単位で指定されている。
#nav_menu { width: 20em; height: 100em }
#nav_list { font-size: 100%; }
例 2: テキストベースのフォームのコントロールに em 単位を使う
この事例では、テキストを含む、又は利用者によるテキスト入力を受け付ける input 要素に「form1」というクラス名を指定している。フォントサイズをパーセント単位で、これらの要素の幅を em 単位で定義するために CSS の規則が用いられている。これによって、フォームコントロール内のテキストは、部分的に欠けて見えなくなってしまうことなく文字サイズの変更に合わせてリサイズされるようになる (フォームコントロールの幅自身も文字サイズに合わせてリサイズされるようになるため)。
input.form1 { font-size: 100%; width: 15em; }
例 3: ドロップダウンボックスに em 単位を使う
この事例では、select 要素に「pick」というクラス名を指定している。フォントサイズをパーセント単位で、幅を em 単位で定義するために CSS の規則が使用されている。これによって、フォームコントロール内のテキストは、部分的に欠けて見えなくなってしまうことなく文字サイズの変更に合わせてリサイズされるようになる。
input.pick { font-size: 100%; width: 10em; }
例 4: テキストベースではないフォームのコントロールに em 単位を使う
この事例では、チェックボックス又はラジオボタンの input 要素に「choose」というクラス名を指定している。これらの要素の幅と高さを em 単位で定義するために CSS の規則が使用されている。これによって、フォームコントロールは、文字サイズの変更に合わせてリサイズされるようになる。
input.choose { width: 1.2em; height: 1.2em; }
検証
手順
- テキストを含む、又はテキストの入力を受け付けるコンテナを特定する。
- そのコンテナの幅及び／又は高さが em 単位で指定されていることを確認する。
期待される結果
- #2 の結果が真である。