このページには、前バージョン(2008年12月11日版の日本語訳)から修正(追加、変更または削除)された箇所があります。
設定:全ての修正を非表示   |   削除箇所を表示/非表示  |   問題No.を表示/非表示   |   [ここから] / [ここまで] を表示/非表示   |   全ての修正を表示

表示サンプル: このページの修正箇所は次のように表示されます。

WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

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

適用(対象)

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

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

解説

ユーザーエージェントの中には、テキストコンテナの幅又は高さを変えることなく、文字サイズの変更をサポートしているものがある。コンテンツ又は機能の損失は、テキストがその割り当てられたスペースからあふれてしまう時に起こりうる。しかし、レイアウトのプロパティは、コンテンツの表示を効果的に継続する方法を提供することができる。 ブロックのサイズは、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. すべてのコンテンツと機能が閲覧及び使用可能である。

チェックポイント

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

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。