CSSの達成方法のためのユーザーエージェントサポートノート

このページは、CSSの達成方法のためのユーザーエージェントサポートノートを記載する。

訳注: ユーザーエージェントサポートノートは記載内容が古く、また WCAG 2.0 の後続仕様である WCAG 2.1 の関連文書 Techniques for WCAG 2.1 から削除されている。そのため、WAIC ではこのページを現在メンテナンスしていない。

C12: フォントサイズにパーセントを使用する

フォントサイズがポイント (pt) やピクセル (px) といった絶対単位 (あるいは事実上の絶対単位) で指定されている場合、Internet Explorer 7以前では、メニューコマンドの「文字のサイズ」でテキストのサイズ変更ができない。 (訳注: 厳密には、ピクセル (px) は「絶対単位」ではなく「相対単位」だが、ブラウザやデバイスの扱いとしては「事実上の絶対単位」となっている。)

Windowsで、コントロールパネルの「ユーザー補助のオプション」から画面を「ハイコントラストモード」に設定した場合、IE6では、最も外側のウィンドウに対してCSSでテキストサイズのパーセンテージを変更したかのように、ページテキストを大きく表示してしまう。 標準的なCSSレイアウトの振る舞いでは、相対値のサイズはかけ算で決定されるため、要素内のテキストサイズは若干異なる値になる。FirefoxとIE 7では、システム設定にもとづくコンテンツのサイズ変更はCSSレイアウトに影響しないので、この効果は起こらない。

C13: フォントサイズにキーワードを使用する

フォントサイズがポイント (pt) やピクセル (px) といった絶対単位 (あるいは事実上の絶対単位) で指定されている場合、Internet Explorer 7以前では、メニューコマンドの「文字のサイズ」でテキストのサイズ変更ができない。 (訳注: 厳密には、ピクセル (px) は「絶対単位」ではなく「相対単位」だが、ブラウザやデバイスの扱いとしては「事実上の絶対単位」となっている。)

C14: フォントサイズに em 単位を使用する

em単位を用いてフォントサイズを指定している場合、パーセントやキーワードを用いたときよりも、Internet Explorer 6でテキストが大きく拡大される。したがって、文字のサイズを最大にすると、テキストが200%以上の大きさで表示され、見切れの問題が発生するかもしれない。

フォントサイズがポイント (pt) やピクセル (px) といった絶対単位 (あるいは事実上の絶対単位) で指定されている場合、Internet Explorer 7以前では、メニューコマンドの「文字のサイズ」でテキストのサイズ変更ができない。 (訳注: 厳密には、ピクセル (px) は「絶対単位」ではなく「相対単位」だが、ブラウザやデバイスの扱いとしては「事実上の絶対単位」となっている。)

Internet Explorer 7は、CSSがstyle要素で指定され、ある要素がキーオフされた場合、テキストサイズを変更する。style属性によるインラインスタイルが用いられた場合、このテキストサイズ変更はサポートされない。 (訳注: 原文の意味がやや不明確なため、WCAGワーキンググループに確認中)

C15: ユーザインタフェースコンポーネントがフォーカスを受けとったときの表示を変更するために、CSSを使用する

Windows版のInternet Explorer 6.0とそれ以前のバージョンでは、ハイパーリンクの要素を除いてダイナミック疑似クラスをサポートしていない。 Internet Explorer 7 は、ハイパーリンクの要素を除いて :focus スタイルをサポートしていない。Internet Explorerの (X)HTML のリンク (a要素) において :focus と同じ効果を出すには、CSSの :active 疑似クラスを追加すればよい。

Windows版のFirefox 1.5とFirefox 2.0、SeaMonkey 1.1は、1行の入力フィールド、複数行の入力フィールド、ラジオボタン、チェックボックス、select要素、送信/リセットボタン及びbutton要素においてダイナミック疑似クラスをサポートしている。 しかし、ラジオボタンやチェックボックスがフォーカスを受け取ったときに色やボーダーを変更することには対応していない。

Windows版のOpera 9.02は、1行の入力フィールド、複数行の入力フィールド、ラジオボタン、チェックボックス、select要素、送信/リセットボタンにおいてダイナミック疑似クラスをサポートしているが、button要素ではサポートしていない。

Windows版のFirefox 2.0とOpera 9.02、SeaMonkey 1.1は、フォームのラベルに対する隣接兄弟セレクタにも対応している。Windows版のFirefox 1.5、Internet Explorer 6.0とそれ以前のバージョンは、フォームのラベルに対する隣接兄弟セレクタには対応していない。

C18: レイアウトデザインのためのスペーサー画像ではなく、CSS のマージンとパディング規則を使用する

Microsoft Windowsプラットフォームの、Internet Explorer 5、Internet Explorer 5.5、Internet Explorer 6.0やInternet Explorer 7の「互換モード」は、W3CのCSS仕様から逸脱したボックスモデルが使用される。 これらのブラウザのバージョンは、右左パディングと左右のボーダーは、要素の合計幅を増やさないため、そのような要素内部のコンテンツのスペースは狭くなる。 (この動作は「ボックスモデルのバグ」と呼ばれる)。 Mac OSのInternet Explorer 5.5、WindowsのInternet Explorer 6と7の「標準準拠モード」は、W3CのCSS仕様で定義されたボックスモデルが使用される。

C23: メインコンテンツのテキスト及び背景の色を指定せず、バナー、特集記事及びナビゲーションなどのようにメインではないコンテンツのテキスト及び背景の色を CSS で指定する

ほとんどのブラウザでは、ウェブページのCSS及びHTMLによる配色を、利用者が設定画面で上書きして変更できるようになっている。 これに関しては、すべてのバージョンのInternet ExplorerとFirefox、Mozilla、Netscape、バージョン6以降のOperaが対応している。

Firefox及びNetscapeで元々指定されている色が上書きされた場合、ほとんどのJavaScriptのポップアップボックスとドロップダウンメニューは使用できない状態になる。 ポップアップボックスは背景が透過して、ページ上のテキストの上にボックスのテキストが重なり、ドロップダウンメニューは透過するかダークグレーの背景となる。

Internet Explorer 6 は、システム設定で同じ色が選択されない限り背景色を上書きしない。

Safariは色の設定がないので、指定した色を上書きすることはできない。同様に、色が指定されていない場合、Safariは白い背景に黒いテキストでページを表示し、システム設定内の色の選択は無視する。

C25: CSS で、テキスト及び背景の色は指定せずに、ウェブページの各領域の範囲を明確にするためのボーダーやレイアウトを指定する

ほとんどのブラウザでは、ウェブコンテンツ制作者のCSS及びHTMLによる配色を、利用者が設定画面で上書きして変更できるようになっている。これは、IE、バージョン6以降のすべてのバージョンのFirefox、Mozilla、Operaを含める。

Firefox及びNetscapeで元々指定されている色が上書きされた場合、ほとんどのJavaScriptのポップアップボックスとドロップダウンメニューは使用できない状態になる。 ポップアップボックスは背景が透過して、ページ上のテキストの上にボックスのテキストが重なり、ドロップダウンメニューは透過するかダークグレーの背景となる。

IE 6は、システム設定で同じ色が選択されない限り、ブラウザの背景色を上書きしない。

Safariは色の設定がないので、指定した色を上書きすることはできない。同様に、色が指定されていない場合、Safariは白い背景に黒いテキストでページを表示し、システム設定内の色の選択は無視する。

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

Windows版のInternet Explorer 6のハイコントラストモードでは、入れ子になったテーブル内の % 指定されたフォントを極端に大きく表示してしまう。 Firefox及びIE6より後のバージョンのIEでは、ハイコントラストモードでもフォントの大きさは変化せず、この問題は発生しない。