WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

G179: 文字サイズを変更しても、テキストコンテナの幅が変更されない際に、コンテンツ又は機能が損なわれないようにする

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

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

適用(対象)

ウィンドウのサイズを変更するとテキストを折り返す、全てのウェブコンテンツ技術

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

解説

ユーザエージェントの中には、テキストコンテナの幅又は高さを変えることなく、文字サイズの変更をサポートしているものがある。コンテンツ又は機能の損失は、テキストがその割り当てられたスペースからあふれてしまう時に起こりうる。しかし、レイアウトのプロパティは、コンテンツの表示を効果的に継続する方法を提供することができる。 ブロックのサイズは、200%まで変更した時に文字があふれないほどの十分な幅を定義している。 文字はブロック内に入りきらない時包まり、そしてブロックは、ブロック内にすべての文字が入り続けるために十分な高さとなる。ブロックは変更された文字が入りきらない時、スクロールバーを提供する。

事例

事例 1: マルチコラムページレイアウト

HTML と CSS はテキストのページのために2つのカラムのレイアウトを作るために使われている。white-space 特性とnormalのデフォルト値を使うことで文字を包み込んでいる。文字のサイズが 200 %になると、文字は再びあふれ、テキストのカラムは長くなる。もしカラムが表示域に対して長すぎると、コンテンツ制作者が overflow:scroll 又は overflow:auto の CSS ルールを指定しているため、ユーザエージェントはスクロールバーを提供し、利用者がビューの中にテキストをスクロールすることができるようにする。

事例 2

カラムの中でテキストブロックでレイアウトしている新聞がある。そのブロックは横幅は固定されているが、高さは指定していない。ブラウザでテキストが変更された時、文字は包まれ、ブロックは高さが高くなる。

事例 3: 関係するテキストとコンテナにパーセンテージとem単位を用いてサイズを指定する

テキストとコンテナの両方に関係する単位を使うことは、テキストに切り捨てすることなく適応させるようにコンテナを拡張することができる。 この画像はインターネットエクスプローラーにおける”標準”サイズの文字である。灰色のボックスはdivのコンテナである。

スクリーンショット:標準の文字サイズ

この画像はInternet Explorerの“最大”の文字サイズを用いて同じテキストとコンテナを示している。灰色のボックスはより大きなテキストを囲むために拡張している。

スクリーンショット:最大の文字サイズ

コード例:

<style type="text/css">
  div { background-color:#ccc; line-height:120%; position:relative; }
  div.RelativeRelative { font-size:100%; width:8.1em; height:6.7em; }
</style>

<div class="RelativeRelative">
  すべての善良な人々にとって彼らの国を援助するのは今だ。
</div>

検証

チェックポイント

  1. 文字サイズが200%に拡大する。

  2. すべてのコンテンツと機能が閲覧及び使用可能である。

判定基準

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