表示サンプル: このページの修正箇所は次のように表示されます。
HTML、XHTML及びCSS
これは、次の達成基準に関連する不適合事例である:
この文書は、テキストのサイズ変更によって、テキストが切り取られたり、端が欠けたり、又は覆い隠されたりして、利用者がテキストを入手できなくなるという不適合事例について述べている。一般的に、この不適合事例は、ユーザーエージェントのレイアウトエンジンが、HTML内の新しいフォントサイズについてのレイアウトヒントのすべてには対応できない場合に発生する。これが発生する方法には、下記のようなものがある:
囲み要素の overflow
プロパティをhidden
に設定する
コンテンツを絶対配置にして使用する
新しいフォントサイズで表示されたコンテンツに対して、十分な大きさがないポップアップを作成する
注記: WCAGワーキンググループは、この不適合事例の検証方法に多くの誤解があることを確認している。この不適合事例の文書を次回の更新時に修正する予定である。それまでは、コンテンツが「達成基準を満たすことのできる実装方法」のいずれかを用いて達成基準を満たしていれば、この不適合事例には該当しないと考えてよい。
フォントサイズはスケーラブルな方法で設定されているが、コンテナは固定ピクセルサイズに設定されている。灰色のボーダーは、テキストのコンテナの境界線を示している。テキストが拡大されるとき、そのコンテナからあふれ、次のパラグラフを覆い隠す。
コード例:
<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のサンプルイメージ:
この事例は、コンテナがテキストを切り取るように設定されることを除けば、前の不適合事例と同じである。テキストは次のパラグラフに流れ出してはいないが、端が欠けている。これも不適合事例である。
コード例:
<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ワーキンググループは、この不適合事例の検証方法に多くの誤解があることを確認している。この不適合事例の文書を次回の更新時に修正する予定である。それまでは、コンテンツが「達成基準を満たすことのできる実装方法」のいずれかを用いて達成基準を満たしていれば、この不適合事例には該当しないと考えてよい。
コンテンツのテキストの文字サイズを200%拡大する。
テキストが切り取られたり、端が欠けたり、又は覆い隠されたりしていない。
2.を満たしていなければ、不適合の条件が適用され、そのコンテンツは達成基準を満たしていないことになる。
日本語訳における注記:
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。