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

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

WCAG 2.0 実装方法集

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

-

F69: 達成基準 1.4.4 の不適合事例: 視覚的に描画されたテキストを200%まで拡大した際に、テキスト、画像又はコントロールが、切り取られたり、端が欠けたり、又は覆い隠されたりする

適用(対象)

HTML、XHTML及びCSS

これは、次の達成基準に関連する不適合事例である:

解説

この文書は、テキストのサイズ変更によって、テキストが切り取られたり、端が欠けたり、又は覆い隠されたりして、利用者がテキストを入手できなくなるという不適合事例について述べている。一般的に、この不適合事例は、ユーザーエージェントのレイアウトエンジンが、HTML内の新しいフォントサイズについてのレイアウトヒントのすべてには対応できない場合に発生する。これが発生する方法には、下記のようなものがある:

[ここから追加]

注記: WCAGワーキンググループは、この不適合事例の検証方法に多くの誤解があることを確認している。この不適合事例の文書を次回の更新時に修正する予定である。それまでは、コンテンツが「達成基準を満たすことのできる実装方法」のいずれかを用いて達成基準を満たしていれば、この不適合事例には該当しないと考えてよい。

[追加ここまで]

事例

不適合事例 1:

フォントサイズはスケーラブルな方法で設定されているが、コンテナは固定ピクセルサイズに設定されている。灰色のボーダーは、テキストのコンテナの境界線を示している。テキストが拡大されるとき、そのコンテナからあふれ、次のパラグラフを覆い隠す。

コード例:


<div style="font-size:100%; width:120px; height:100px; border: thin solid gray;> 
  Now is the time for all good men to come to the aid of their country. 
</div>
<p>Now is the time for all good men to come to the aid of their country.</p>
			

事例 1のサンプルイメージ:

コンテナの枠の外にあふれ、ページの他のテキストを覆い隠しているテキスト。

不適合事例 2:

この事例は、コンテナがテキストを切り取るように設定されることを除けば、前の不適合事例と同じである。テキストは次のパラグラフに流れ出してはいないが、端が欠けている。これも不適合事例である。

コード例:


<div style="font-size:100%; width:120px; height:100px; overflow: hidden; border: thin solid gray;>
 Now is the time for all good men to come to the aid of their country. 
</div>
<p>Now is the time for all good men to come to the aid of their country.</p>
			

事例 2のサンプルイメージ

拡大したテキストのために端が欠けたテキスト。

(今のところ、なし。)

検証

[ここから追加]

注記: WCAGワーキンググループは、この不適合事例の検証方法に多くの誤解があることを確認している。この不適合事例の文書を次回の更新時に修正する予定である。それまでは、コンテンツが「達成基準を満たすことのできる実装方法」のいずれかを用いて達成基準を満たしていれば、この不適合事例には該当しないと考えてよい。

[追加ここまで]

チェックポイント

  1. コンテンツのテキストの文字サイズを200%拡大する。

  2. テキストが切り取られたり、端が欠けたり、又は覆い隠されたりしていない。

判定基準

日本語訳における注記:

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