em 単位を用いて、テキストコンテナのサイズを指定する

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

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

適用 (対象)

CSS

これは、次の達成基準に関する達成方法である:

解説

この達成方法の目的は、テキストを含むボックス又はテキストの入力を受け付けるボックスの幅及び又は高さを、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 の結果が真である。