WCAG 2.0のためのCSSテクニック

【注意】この文書は、W3Cが公開している2005年6月30日付の「CSS Techniques for WCAG 2.0 ワーキングドラフト（草稿）」（原文は英語）を、財団法人日本規格協会情報技術標準化研究センター情報アクセシビリティ国際標準化に関する調査研究開発委員会ウェブアクセシビリティ国際規格調査研究部会が日本語に翻訳したものです。このワーキングドラフトの正式な文書は、あくまでW3Cのサイト内にある英語版であり、この文書には翻訳上の間違い、あるいは不適切な表現が含まれている可能性がありますのでご注意ください。また、リンク先は英語の場合もあります，ご了承ください。
翻訳協力：木達一仁

1. 構文と基本データ型

1.1 変化させる必要のあるプロパティ値にはemもしくは%を使用する

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 1.3

タスク:

変化させる必要のあるプロパティ値にはemもしくは%を使用する

編集者注記：現在はこれは「構造から表現を分離する」、「技術サポート」のためのガイドラインに位置づけられています。しかしながら、新しいガイドライン/達成基準についての2004年6月23日テクニックに関する電話会議において、「配慮をもって変える」ことの議論がありました。論点827

何を変える必要があり、何がそうでないかについて考えてください。たとえばラスター画像は固定された幅と高さをもっています...同様に、もしページの端からテキストを離したければ、body要素に5ピクセルの余白を設定すれば問題ないでしょう。他方でテキストは、いつでも自由に大きさを変えられるべきです（画像中にテキストを使うべきでない良い理由です）。しかしテキストが倍の大きさになったとき、その隣の溝もまた倍の幅にする必要があるでしょうか？おそらくそうではないでしょう。事実、倍の幅の溝はページのユーザビリティを低くしかねません。

Charles Munat - 2001年5月6日

変化させる必要のあるフォントプロパティ:

font-size
line-height

編集者注記: Tim Bolandは長さの単位（相対および絶対値）をサポートしているCSS 2.1の全プロパティのリストを作成しました。個々のプロパティにおいてpx、%、emを使うことに伴うアクセシビリティ上の論点を定めるため、すべてをテストすべきでしょうか？論点728ピクセル値の指定された固定幅を持つレイアウトと、em値でテキストを指定することは問題ないでしょうか？論点1013

例:

文字の大きさを設定するのにemを使う

h1 { font-size: 2em }

例:

h1 { font-size: 12pt }

よりもむしろ。

1.2 変化させる必要のないプロパティ値にはpxを使用する

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 1.3

タスク:

変化させる必要のないプロパティ値にはpxを使用する：

ラスター画像の高さと幅
マージン
ボーダー

編集者注記：Tim Bolandは長さの単位（相対および絶対値）をサポートしているCSS 2.1の全プロパティのリストを作成しました。個々のプロパティにおいてpx、%、emを使うことに伴うアクセシビリティ上の論点を定めるため、すべてをテストすべきでしょうか？論点728ピクセル値の指定された固定幅を持つレイアウトと、em値でテキストを指定することは問題ないでしょうか？論点1013ならびに論点1020

例:

マージンにはpxを使ってください。さもなければ、文字が大きくになるにつれマージンの幅が増し、文字に利用できるスペースが減るでしょう。

編集者注記：画像の幅と高さを示す他の例を加えますか？

body { margin-left: 15px; margin-right: 15px}

2. セレクタ

2.1 個々の文字や行を選択する

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 1.3

タスク:

個々の文字や行を選択するには:first-letter、:first-lineまたはspan要素を使ってください。

:first-letterおよび:first-line疑似要素により、テキストから成る段落の最初の文字や行を参照できます。論点735

例:

この例ではドロップキャップを作るのにspan要素とclass属性を使っています。

<style type="text/css">
    .dropcap { font-size : 120%; font-family : Helvetica }
</style>
...
   <p><span class="dropcap">O</span>nce upon a time...</p>

例:

この例ではドロップキャップを作るのにspan要素とclass属性の代わりに:first-letter疑似要素を使っています。

<style type="text/css">
      p.dropcap:first-letter  { font-size : 120%; font-family : Helvetica }
</style>
...           
   <p class="dropcap">Once upon a time...</p>

リソース:

CSS 2.1: :first-letter疑似要素

2.2 コンテンツの代替表現にアクセスする

タスク:

属性値の代替表現を提供してください（オプション）。

編集者注記：認識上の負荷を下げるための同等のテキストに関連していますか？

編集者注記：このテクニックはどの達成基準またはガイドラインにも明確に関連付けられていません。

CSS2は以下の場合に属性値に指定されたコンテンツの代替表現にユーザがアクセスできるようにします：

属性セレクタ
attr()機能とcontentプロパティ
:beforeおよび:after疑似要素

例:

IMG要素の"alt"属性値は画像の後ろで表現（視覚的に、聴覚的に等）されます。画像が無くとも（たとえばユーザがインタフェースを介し画像を非表示にしていても）属性値は表示されることに注意してください。

    
img:after {         
   content: attr(alt)      
}

3. メディアタイプ

3.1 メディアタイプ

このテクニックはガイドラインの以下のセクションに関連しています:

タスク:

メディアに固有なスタイルシートを提供することにより、さまざまなデバイスに表示を最適化してください。

編集者注記：文章は未完成です。

CSS2の"メディアタイプ"（@media規則とともに使用）により、著者とユーザは特定のターゲットデバイス向けに文書がより適切に表示されるようにするスタイルシートをデザインできます。これらのスタイルシートは、コンテンツを点字デバイス、音声合成装置、あるいはTTYデバイス向けに最適化することができます。"@media"規則を使うことで、適用できないルールを無視することによりユーザーエージェントによるダウンロード時間を短縮できるようにもします。

4. ボックスモデル

4.1 ボーダーを作成する

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 1.3

タスク:

コンテンツグループの周りのボーダーを作るにはスタイルシートを使ってください。

編集者注記：このテクニックは存在するどの達成基準にも関連付けられていません。

ボーダーは視覚的に「分離」「分類」を伝えます。ボーダーのスタイルを指定するにはこれらのCSSプロパティを使ってください：

border、border-width、border-style、border-color
table要素にはborder-spacingとborder-collapse

例:

h1要素は2ピクセル幅で赤くコンテンツから1文字ぶん離れた上ボーダーを有します。

   <style type="text/css">   
      h1 { padding-top: 1em; border-top: solid 2px red }
   </style>
...
<h1>Chapter 8 - Auditory and Tactile Displays</h1>

リソース:

CSS 2.1: ボーダープロパティ

4.2 マージン

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 1.3

タスク:

要素のコンテンツの四方にスペースを作るにはmargin、margin-top、margin-right、margin-bottom、margin-leftを使ってください。

編集者注記：このテクニックは存在するどの達成基準にも関連付けられていません。

改行ではない空白文字（ ）を使う代わりに、CSSでスペースを作ってください。

5. 視覚整形モデルと視覚効果

5.1 文字表記の方向を指定する

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 3.1
- 3.1 L1 SC1

タスク:

文字表記の方向を指定するにはdirectionとunicode-bidiプロパティを使ってください。

文字表記の方向：direction、unicode-bidi

編集者注記：コンテンツの言語が表示上の方向に変化を要する場合にのみ、このテクニックを適用することを明記します。

リソース:

- CSS 2.1: directionプロパティ
- CSS 2.1: unicode-bidiプロパティ

5.2 レイアウト、位置、レイヤー、並びを指定する

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 1.3
- 1.3 L1 SC1

タスク:

間隔を制御するにはtext-indent、text-align、word-spacing、font-stretchプロパティを使ってください。非推奨のcenter要素の代わりにtext-align: centerを使ってください。

論点308

編集者注記：clearプロパティをこのリストに加えますか？

5.3 位置決めをする（float、position）

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 1.3

タスク:

位置を制御するにはfloat、position、top、right、bottom、leftプロパティを使ってください。

これらのプロパティにより、ほとんどすべての要素を文書上の登場位置とは独立に視覚的な位置を制御することができます。著者はコンテンツをまずはスタイルシートが無くても意味が通じるようデザインし（すなわち文書は"論理的な"順序で書き）、それから視覚効果を得るようスタイルシートを適用すべきです。位置決めのためのプロパティはマージンノート（自動的に番号が振られるかもしれません）、サイドバー、フレームのような効果、シンプルなヘッダとフッタなどを作るために使われます。

5.4 コンテンツの表示・非表示

タスク:

プレースホルダー

編集者注記: 論点298display: noneとvisibility: hiddenをサポートについて。

5.5 form要素の不可視ラベルを作る

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 4.2
- 4.2 L2 SC1

タスク:

視覚的に必要の無いフォームコントロールのラベルはCSSで隠してください。

label要素を隠すために使うにはこれらのCSSプロパティを使ってください。

height、width、position、overflowまたはdisplay

一般的にはすべてのフォームコントロールに視覚的なラベルを付与するのが最善ですが、そのコントロールを囲っているテキストの記述そして/あるいはそのコントロールが含んでいるコンテンツ次第では、視覚的なラベルが不要な場合があります。しかしながらスクリーンリーダのユーザは、コントロールを耳にしたときにその目的が理解できるよう、個々のフォームコントロールに対し明確にラベルが付けられていることを必要とします。ラベルはposition:absoluteを指定するか、heightおよびwidth値を0にしoverflow:hiddenを指定するか、あるいはdisplay:noneを指定することにより、表示しないようにすることができます。これらのテクニックはラベルが目の見えるユーザに対して表示されることを防ぎますが、スクリーンリーダーはそのラベルが非表示であっても読み上げるでしょう。ブラウザ側でCSSが無効化されていれば、すべてのユーザに対しラベルが表示されます。

編集者注記：次の2つの例はよく似ています。それらは役立っているでしょうか、それとも1つにまとめられるべきでしょうか？

編集者注記：HTMLテクニック中のtitle属性についてのテクニックを参照しますか？

ユーザーエージェントについての注記：

JAWS 4.51

ページを読み上げる際、そしてフォームコントロールを操作するとき、隠されたあるいは大きさが0のラベルを読み上げます。

WindowEyes 4.5 sp3

ページを読み上げる際、そしてフォームコントロールを操作するとき、隠されたラベルを読み上げます。ページを読み上げる際、一度は非表示のラベルに遭遇したとき、そして再びコントロールの記述とラベルを関係付けるとき、ラベルを2度読み上げます。

Home Page Reader 3.02

項目読み上げモードとコントロール読み上げモードにおいて、隠されたラベルを読み上げます。

例:

次に示すボックスの組み合わせはそれぞれ、コントロールの目的を識別する明確なラベルを有しています。個々のラベルにnosizeというclass名でスタイル指定することで、ラベルは隠されています。width:0px、height:0px、position:absolute;そしてoverflow:hiddenを指定することにより、nosizeスタイルはラベルを非表示にします。スクリーンリーダはそれぞれのボックスと明確に関連付けられた隠れたラベルを読み上げるでしょう。

上記のnosizeスタイルを使う代わりに、postion:absolute;とleft:-200px;を指定してラベルを"画面外"に配置することもできます。このテクニックもスクリーンリーダとうまく協働します。上または左方向の画面外のみに要素を配置してください。もし右あるいは下方向に対象を配置したとすると、多くのブラウザはユーザがコンテンツにたどり着けるようスクロールバーを加えます。

<style type="text/css">
.nosize {
	position:absolute;
	width:0px;
	height:0px;
	overflow:hidden;
}
</style>

<p>
Enter name (first, last):
<label for="firstName" class="nosize">Enter first name</label>
<input id="firstName" name="first" type="text" size="10" />
<label for="lastName" class="nosize">Enter last name</label>
<input id="lastName" name="last" type="text" size="15" />
</p>

例:

次の例では個々のラベルはnodisplayというclass名でスタイル指定し非表示にされています。nodisplayスタイルはdisplay:noneを指定することにより表示されることを防いでいます。スクリーンリーダは個々のボックスの組み合わせに明確に関連付けられた隠れたラベルを読み上げます。

<style type="text/css">
.nodisplay {
   display:none;
}
</style>

<div>Enter month and year of membership expiration:
<label for="month" class="nodisplay">Select month membership expires.</label>
<select id="month">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<label for="year" class="nodisplay">Select year membership expires.</label>
<select id="year">
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
</select>
</div>

リソース:

6. コンテンツ生成、自動ナンバリングとリスト

CSS2に含まれるいくつかの仕組みにより、スタイルシートでコンテンツを生成することができます：

:beforeと:after疑似要素とcontentプロパティがあります。一緒に使うことで、著者は要素の内容の前または後ろにマーカー（たとえばカウンターや、下の例にある「例の終わり」のような定型文言）を挿入することができます。論点191 Gregory Rosmaitaの例
cue、cue-beforeそしてcue-afterプロパティがあります。これらのプロパティにより要素の内容の前または後ろで音を再生することができます。
番号やアイコンまたは画像といったリストスタイルがあります（一般的にはli要素と関連付けられています）。CSS2では、CSS1で定義されたスタイルに対し、国際的なリストスタイルが加わっています。list-style-typeおよびcontent プロパティを参照してください。論点738

編集者注記：これらは個別のテクニックに分けますか？

生成されたコンテンツはマーカーを提供することで、ユーザが文書内を行き来したり、均整の取れたスクロールバーや目次のフレーム等といった視覚的な手がかりにアクセスできないときでも、志向性を失わないようにするのを助けます。

編集者注記: 論点253：CSSによって生成されたテキストにありがちな誤用について警告を付記すべきでしょうか？

6.1 スタイルシートの生成したコンテンツに等価なテキストを提供する

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 1.1
- 1.1 L1 SC1

タスク:

background-image、list-styleまたはcontentプロパティを介してスタイルシートにより生成された重要な画像には、等価なテキストを提供してください。

編集者注記：これの言わんとするところは"もし何か重要なものがCSSに含められているなら、それを止めるか、あるいはHTML上かどこかに記述してください"ということでしょうか？しかしながら、これは"コンテンツ生成は構造を識別する手助けになる"と衝突します。

編集者注記：2つのテクニックに分けるべきでしょうか？第一に、アクセシビリティを向上させるのにコンテンツ生成をどのように使うべきか。第二に、使う場合に副次的な効果に用心してください、ということ。たとえば、FIRを使う場合、テキストが表示される領域の大きさを強制することになります。それゆえ、画像を非表示とした場合、テキストの大きさを変更することはできますが、その領域よりも大きく - 読めないくらいに拡大されるかもしれません。

編集者注記：もしそれが背景画像であれば、それはラベルを必要としますか？1.1 背景画像に例外はありません。また、CSSに含まれた画像と等価なテキストを"明確に関連付ける"方法はあるでしょうか？

6.2 付加的な構造情報を提供する

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 1.3

タスク:

付加的な構造情報を提供するには、:beforeと:afterを使ってください。

編集者注記：スタイルシートによって生成されたテキストは文書のソースの一部ではなく、ドキュメントオブジェクトモデルレベル1を使ってコンテンツにアクセスする支援技術からは利用できないかもしれません。

論点191 Gregory Rosmaitaの例

例:

次のスタイルシートは「例の終わり」という言葉を個々の例の後ろに生成しています。

 
div.example:after {        
   content: "例の終わり"
}

例:

文書中で今読んでいる場所を確認する手助けに、ユーザは段落に番号を付けることができます。

 
p:before {           
   content: counter(paragraph) ". " ;            
   counter-increment: paragraph      
}

例:

CSS2スタイルシートは入れ子になったulまたはol要素のリストに対し数字の組み合わせを提供します。項目には"1"、"1.1"、"1.1.1"等のように番号が付けられます。

編集者注記：法律に関する文書のような、これが実際に使われているか有益である実際の事例をみつけてください。

<style type="text/css">
   ul, ol { counter-reset: item }
      li { display: block }
      li:before { content: counters(item, "."); counter-increment: item }
</style>

6.3 リストマーカーを変えるためにスタイルシートを使う

タスク:

リストマーカーを変えるには、画像ではなくCSSを使ってください。

li 要素として作られた、番号なしリストの項目のマーカースタイルを変えるには、CSSを使ってください。CSSにおいては、もしマーカー画像が読み込めなかった場合に表示させる代替のスタイル（たとえば"disc"）を指定することが可能です。

例:

この例では番号なしリストのマーカーに"star.gif"という画像、あるいはその代替としてdiscを指定しています。

 
<html xmlns="http://www.w3.org/1999/xhtml">   
   <head>     
      <title>Using style sheets to change bullets</title>     
      <style type="text/css">       
         ul { list-style: url(star.gif) disc }     
      </style>   
   </head>   
   <body>     
      <ul>       
         <li>Audrey</li>       
         <li>Laurie</li>       
         <li>Alice</li>     
      </ul>   
   </body> 
</html>

例:

さらにユーザが視覚的に表示されたリスト項目間の違いを理解することを保証するために、コンテンツ開発者はリスト項目の前もしくは後ろにテキストラベルを提供すべきです：

 
<html xmlns="http://www.w3.org/1999/xhtml">   
   <head>     
      <title>Bullet styles example</title>     
      <style type="text/css">       
         .newtxt {          
            font-weight: bold;         
            color: red;         
            background-color: yellow        
         }       
         .newbullet {          
            list-style : url(yellow.gif) disc        
         }     
      </style>   
   </head>   
   <body>     
      <ul>       
         <li class="newbullet">Roth IRA          
            <span class="newtext">(New)</span></li>       
         <li>401(k)</li>     
      </ul>   
   </body> 
</html>

リソース:

HTML 4.01 リストの視覚表現

7. 色と背景

7.1 色を指定する

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 1.3
- 1.3 L2 SC1

タスク:

色を指定するにはcolor、background-color、border-color、outline-colorプロパティやダイナミックな疑似クラスを使ってください。

色を指定するには以下のCSSプロパティを使ってください：

前景の文字色にはcolor。
背景色にはbackground-color。
ボーダーの色にはborder-color、outline-color。
リンクの色については:link、:visitedそして:active疑似クラスを参照してください。

リソース:

7.2 色を6桁の値または名前（オプション）で指定する

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 1.3

タスク:

ユーザーエージェントが最も良くサポートしていることから、6桁の値で色を指定してください。

ユーザーエージェントの完全なサポートのためには、表示色の指定に16進数のRGB値だけを使ってください。すべてのユーザーエージェントは、16進数のRGB値を#rrggbbというフォーマットにより6桁で指定した色をサポートしています。16進数の値が同じ文字の組み合わせから成るとき、#rgbという表記が許容されていますが（たとえば#FF0000は#F00と表記できます）、これはユーザーエージェントによって完全にサポートされてはいません。r、g、bのそれぞれが赤、緑、青色の数値をあらわすrgb(r,g,b)表記もまた、すべてのユーザーエージェントがサポートしているわけではありません。すべてのブラウザはHTML 4仕様で定義された16色をサポートしており、たいていのモダンブラウザはCSS3 カラーモジュールにあるx11 色名リストをサポートしています。

ユーザーエージェントについての注記：

JAWS4.51

JAWSは要素の前景色を読み上げるよう設定することができます。このオプションが有効であれば、JAWSはCSS3 カラーモジュール仕様にあるx11 色名リストのたいていの色の名前を読み上げます。色は名前か、6桁の値で指定されなければなりません。3桁の値とrgb値では機能しません。

WindowEyes 4.5 sp3

WindowEyesは、特定のキーを順番に押すことにより、カーソルもしくはマウスの下にある文字の特性を読み上げるよう設定することができます。WindowEyesはスタイルのなかでRGB値がどのように提供されていようと常に色を読み上げます。

例:

'赤'という色が、6桁の値と'red'というCSSの色名で指定されています。

h1 {color: #FF0000}
h2 {color: red}

リソース:

- CSS 2.1: 色 CSS 2.1仕様には、17の色名が含まれています。
- CSS3カラーモジュール仕様にあるx11 色名リスト
- HTML4仕様で定義された16色

7.3 前景と背景にコントラストを作る

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 1.4
- 1.4 L2 SC1

タスク:

前景色と背景色に十分なコントラストを確保してください。

色のコントラストが十分かどうかを決めるには、色盲の人や低解像度モニターのユーザに読んでもらったり、モノクロプリンター（背景や色がグレースケールで表示される）でページを印刷するうち、ひとつをテストするだけで十分です。また印刷したものを2～3度コピーし、それがどの程度劣化するかをみてください。これは冗長な目印を加える必要のある場所（例：ハイパーリンクは一般的にウェブページ上では下線がひかれています）あるいはそのような目印が小さすぎたり不明瞭すぎる場所を明らかにします。

編集者注記：まだこのテストを推奨しますか？代わりにBrewerのパレットをもしくは他のテクニックが推奨できます。これを一般的なテクニックに移動しますか？論点739 このテクニックに追加されたコメント

リソース:

- Aries Arditi, PhD, Lighthouse InternationalによるEffective Color Contrast
- Cynthia A. Brewer, Department of Geography, Penn StateによるColor Use Guidelines for Data Representation
- Joe ClarkによるType and colour。Building Accessible Websites第9章。

7.4 背景色と前景色を指定する

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 1.4
- 1.4 L2 SC1

タスク:

前景色を指定するときは、常に背景色も指定してください（逆も同様）。

編集者注記：アクセシビリティの問題でしょうか？ユーザーエージェントが上書きできませんか？

8. フォント

8.1 代替フォントを指定する

このテクニックはガイドラインの以下のセクションに関連しています:

タスク:

代替フォントは常に指定してください。

編集者注記：アクセシビリティ上の論点は何でしょうか？

編集者注記：可読フォントの選択についてJIS関連の論点論点892

例:

もしユーザ環境で"Gill Sans"が利用可能でなければ、sans-serifのフォントが使われます。

h1 { font-family: "Gill Sans", sans-serif }

リソース:

- CSS 2.1 仕様: font-familyプロパティ
- Eric MeyerとApple Developer ConnectionによるフォントとCSSを学ぶ

8.2 文字の特色を指定する

このテクニックはガイドラインの以下のセクションに関連しています:

タスク:

文字の特色を制御するにはfont-family、font-size、font-size-adjust、font-stretch、font-style、font-variant、font-weightプロパティを使ってください。

テキストを整形するには、以下の非推奨のHTML要素や属性の代わりにCSSを使ってください：font、basefont、face、size

例:

p要素に対し2つのclass名（primaryとsecondary）、h2要素に対し1つのclass名（subsection）により、文字の特色が指定されています。

<style type="text/css">
   p.primary { font-weight: bold }
   p.secondary { font-weight: lighter; font-size: smaller }
   h2.subsection { font-family: Helvetica, sans-serif }
</style>

リソース:

CSS 2.1: フォント

8.3 xx-smallからxx-largeまでを使って文字サイズを指定する

タスク:

プレースホルダー

編集者注記: xx-smallからxx-largeまでを使うことについてのテクニックのためのプレースホルダー論点307

9. テキスト

9.1 ラスター画像を使うよりもCSSでスタイルを指定したテキストを作る

このテクニックはガイドラインの以下のセクションに関連しています:

タスク:

テキストにスタイルを与えるには、テキストの画像を作るよりもスタイルシートを使ってください。

文字情報にテキストを用いることで、音声合成装置や点字ディスプレイを使っている人にとっても情報が利用できるようになります。スタイルシートを使うことで、ユーザが色や文字の大きさを変えることができるようにもなります。

もし文字の効果を作るのにラスターベースの画像が必要な場合、その画像はアクセシブルでなければなりません。（等価なテキストのセクションを参照してください。）

編集者注記：論点827と論点556に関連します。

例:

画像の中で"Example"という単語が大きく赤い文字で書かれています。alt属性が等価なテキストを含んでいます。

<p>This is an <img src="BigRedExample.gif" alt="example"/> of big red text. </p>

例:

大きく赤い文字を作ります。

<style type="text/css">
  em.BigRedExample {color: red; font-size: 3 em}
</style>
...
<p>This is an <em class="BigRedExample">example</em> of big red text. </p>

9.2 ラスター画像の文字をCSSでアクセシブルにする

このテクニックはガイドラインの以下のセクションに関連しています:

タスク:

backgroundと位置決めのプロパティを使い、文字を含む画像をアクセシブルにしてください。

好ましいテクニックとは文字を含む画像を使わないことですが、多くのデザイナーは特定の効果を得るために画像中の文字を好みます。文字を含んだ画像が必要なとき、backgroundと位置決めのプロパティを使うことにより、その画像を支援技術に対してアクセシブルにすることができます。background:url(画像のurl);を使い、画像を挿入します。CSSまたは画像読み込みがブラウザで無効化されていた場合に表示される代替テキストが提供されます。代替テキストのためのスタイルを作る際、その幅と高さは画像のサイズよりも短いことに注意してください。

編集者注記：論点827と論点556に関連しています。

例:

class属性値がreplaceのspan要素は"Hello World"と書かれた画像をbackgroundプロパティを介して表示します。スクリーンリーダは、.replaceでスタイルが定義された、h1要素内にある代替テキストを読み上げます。注記：とても大きなフォント（40ptかそれ以上）のユーザと、画像を非表示にしているユーザに対しては、テキストを覆い隠すことに問題があるかもしれません。

<style type="text/css">
 .replace {
  width: 300px;
  height: 100px;
  position: relative;
}

.replace span {
  background: url("hello_world.gif") no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>
<h1 class="replace" ><span ></span>Hello World!</h1>

リソース:

- 編集者注記：Gilder画像変換テクニック（blog.tom.me.uk）へのリンクが壊れています。
- CSS 2.1: 背景

9.3 テキストをインデントさせる

このテクニックはガイドラインの以下のセクションに関連しています:

タスク:

テキストをインデントさせるにはtext-indentプロパティを使ってください。

編集者注記：これと構造的な要素を使うことのあいだには「分け隔てることのできない」関係があります。（たとえば、HTMLにおいて、header要素を使い、次にCSSでスタイルを付与する）

9.4 文字間隔と単語間隔

タスク:

文字や単語の間隔、その他の空白を制御するにはletter-spacing、word-spacing、white-spaceプロパティを使ってください。

文字が空白文字によって分け隔てられているとき、それらは個々の文字として読まれます。それゆえ"H E L L O"は"hello"という単語としてではなく、スクリーンリーダによって一文字ごとに'H、E、L、L、O'と読み上げられます。同じ視覚効果を得るには、letter-spacingプロパティを"HELLO"に適用してください。空白の無いテキストは、有効に音声へ変換されます。

文字/単語間隔：letter-spacing、word-spacing
空白：white-space。このプロパティは、ある要素の内容における空白の処理を制御します。

編集者注記：アクセシビリティ上の問題でしょうか？このテクニックには、頭辞語または略語の大文字使用がCSSによって実現されるべきであることを含むべきではありません。

例:

文字の間隔を'0.1em'まで増しています。

p.space { letter-spacing: 0.1em }
...
<p class="space">HELLO</p>

リソース:

CSS 2.1: 文字と単語の間隔：letter-spacingとword-spacingプロパティ

9.5 大文字・小文字を変える

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 1.3
- 1.3 L2 SC1

タスク:

大文字・小文字を変えるには、text-transformプロパティを使ってください。

大文字・小文字：text-transform（すべてを大文字化、すべてを小文字化、最初の文字を大文字化）

リソース:

CSS 2.1：text-transformプロパティ

9.6 影付き効果を作る（非推奨）

タスク:

text-shadowプロパティを使い影付き効果を作ってください。

影付き効果：text-shadow

編集者注記：text-shadowプロパティはCSS2.1仕様では無くなりました。ゆえに、このテクニックはこの文書から削除するのが適当です。

9.7 下線、上線と点滅

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 2.2
- 2.2 L2 SC1

タスク:

下線、上線と点滅にはtext-decorationプロパティを使ってください。

CSSでもってコンテンツを点滅させることにより、ユーザはスタイルシートを無効化したり、その効果をユーザーエージェントの設定で上書きすることにより、点滅を止めることができるようになります。blinkやmarqueeといった要素は使わないでください。それらは標準ではありません。

編集者注記: 論点1021 ユーザーエージェントによって制御できないかもしれない可能性があるならば、blinkに言及したいと思いますか？blinkを一切使わないよう奨めるべきでしょうか？

ユーザーエージェントについての注記：

Firefox 1.0

text-decoration:blinkをサポートしています。JavaScriptでは点滅の有効/無効化を行うことができません。

Internet Explorer 6.0

text-decoration:blinkをサポートしていません。

Mozilla 1.71

text-decoration:blinkをサポートしています。JavaScriptに使って、点滅している要素のclassNameプロパティを、text-decoration:blinkを含まないスタイルへと変更することで、点滅の無効化を行うことができます。

Opera 7.54

リソース:

CSS 2.1: 下線、上線、打ち消し線と点滅：text-decorationプロパティ

10. テーブル

10.1 空のテーブルセルを表示する

タスク:

空のテーブルセルを表示するにはempty-cellsプロパティを使ってください。

empty-cellsプロパティにより、ユーザはテーブルセルの内容を空のままでセルのボーダーをスクリーン上または紙面に表示させることができます。空であることを意図されたデータセルには、視覚効果を得る目的で空白または改行ではないスペースを入れるべきではありません。

11. ユーザインタフェース

11.1 コンテンツの輪郭を描く

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 1.3

タスク:

コンテンツグループの輪郭（アウトライン）を描くにはスタイルシートを使ってください。

アウトラインは視覚的に"分離"または"分類"を伝えます。アウトラインのスタイルを指定するにはCSSプロパティを使ってください：

ダイナミックアウトラインにはoutline、outline-color、outline-style、outline-widthプロパティを使ってください。

リソース:

CSS 2.1: ダイナミックアウトライン：outlineプロパティ

12. 音声効果

12.1 音声表現を作る

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 1.4
- 1.4 L2 SC3

タスク:

音声表現を作るには、ACSSまたはSSMLを使ってください。

編集者注記：音声コントラストのガイドラインが、音声を消したりユーザ側で音声スタイルを制御する能力に言及している場合には、達成基準にリンクすることができました。おわかりのように、ガイドラインにはリンクされていますが、しかし達成基準はありません。2005-06-24 Michael Cooper：背景音声を消す仕組みについてのガイドラインに関連付けられており、このednote（訳注：この単語の意味が不明のため、訳すことができません）の精神に基っているかを考えると、定かではありません。

編集者注記：これを将来のテクニックとし、CSS3スピーチモジュールを参照するためのプレイスホルダーを作ってください。CSS 2.1では、オーラルスタイルシートは付録に移動しました。CSS3では、おそらくSSMLへの参照と、ボイスブラウザワーキンググループによるその他の成果になります。

書体が視覚的な情報を提供するのとすっかり同じように、CSS2のオーラルプロパティは目の見えないユーザやボイスブラウザのユーザに情報を提供します。

以下のプロパティはCSS2のオーラルカスケーディングスタイルシートの一部です。

volumeプロパティは音声のボリュームを制御します。
speakプロパティはコンテンツが読み上げられるかどうか、もしそうならスペルを読むのか単語として読むのかを制御します。論点304 国際化の論点 "スペル"は文字ベースの言語に対してのみ適応性を有します。
pause、pause-before、pause-afterプロパティは、コンテンツの前もしくは後ろにおける読み上げの休止を制御します。これによりユーザはより良い理解のためにコンテンツを分けることができます。
cue、cue-before、cue-afterプロパティはコンテンツの前もしくは後ろで再生する音を指定します。これは（ちょうど視覚的なアイコンのように）識別にとって価値があります。
play-duringプロパティは要素の読み上げられる背景音声を（ちょうど背景画像のように）制御します。
azimuthとelevationプロパティは音に次元を与え、たとえばユーザが声を識別できるようにします。
speech-rate、voice-family、pitch、pitch-range、stress、richnessプロパティは、音声の質を制御します。これらのプロパティを異なる要素で変化させることにより、コンテンツがどのように音声表現されるかをうまく調整することができます。
speak-punctuation、speak-numeralプロパティは数や句読点がどのように読み上げられるかを制御します。これは音声によるブラウジング体験の質に影響を与えます。

さらに、speak-headerプロパティはテーブルの見出し情報がテーブルセルの前でどのように読み上げられるかを制御します。

例:

この例では、音のさまざまな特性（音声版のフォントに相当するようなvoice-familyを含む）が、コンテンツが見出しであることをどのようにユーザに知らせるかを示しています。

    
h1 {           
   voice-family: paul;           
   stress: 20;           
   richness: 90;           
   cue-before: url("ping.au")         
}

13. さまざまなテクニック

13.1 構造的マークアップに基づいた絶対配置

このテクニックはガイドラインの以下のセクションに関連しています:

ガイドライン 1.3

タスク:

CSSが適用されなくても意味が通じるよう構造的なマークアップと文書順序を使ってください。

CSS2の位置決めのプロパティを使うことで、コンテンツはユーザの側ではどの場所にでも表示され得ます。スクリーン上に項目が表示される順序は、文書のソース上の順序とは異なるかもしれません。

編集者注記："そして"構造的な要素の使用との関連。

非推奨の例:

次の例ではいくつかの原則を説明します：

テキストは、マークアップ上とは異なる順序により、ブラウザ上で視覚的に表示されます。
CSSによる位置決めは、テーブルのような効果を生むのに使われるかもしれません。table要素は同じ効果を生むために使うことができました。

class属性は、配置される個々のオブジェクトに対して定義されていることに注意してください。これらの例では"class"の代わりに"id"を使うこともできました。この例では、オブジェクトが繰り返されユニークでは無いがゆえに"class"を使用しました。

最初の図はスタイルシートが適用された状態を示しており、テキストは2カラムのなかに表示されます。class名"menu1"（Products）と"menu2"（Locations）をもつ要素はそれぞれカラムの見出しとして表示されます。"Telephones, Computers, and Portable MP3 Players"はProductsの下でリスト化され、"Wisconsin" and "Idaho"はLocationsの下にリスト化されます。

2番目の図はスタイルシートが適用されていないときを示しており、構造的な要素を適切に使っていないため、すべてのテキストが1行でソースにある順に"Products Locations Telephones Computers Portable MP3 Players Wisconsin Idaho."と表示されています。

    
<head>
   <style type="text/css">      
      .menu1 { 
         position: absolute; 
         top: 3em; 
         left: 0em;     
         margin: 0px; 
         font-family: sans-serif;     
         font-size: 120%; 
         color: red; 
         background-color: white 
      }        
      .menu2 { 
         position: absolute; 
         top: 3em; 
         left: 10em;     
         margin: 0px; 
         font-family: sans-serif;     
         font-size: 120%; 
         color: red; 
         background-color: white 
      }      
      .item1 { 
         position: absolute; 
         top: 7em; 
         left: 0em; 
         margin: 0px 
      }      
      .item2 { 
         position: absolute; 
         top: 8em; 
         left: 0em; 
         margin: 0px 
      }      
      .item3 { 
         position: absolute; 
         top: 9em; 
         left: 0em; 
         margin: 0px 
      }      
      .item4 { 
         position: absolute; 
         top: 7em; 
         left: 14em; 
         margin: 0px 
      }      
      .item5 { 
         position: absolute; 
         top: 8em; left: 14em; 
         margin: 0px 
      }      
      #box { 
         position: absolute; 
         top: 5em; 
         left: 5em 
      }     
   </style>
</head>    
<body>    
   <div class="box">      
      <span class="menu1">Products</span>       
      <span class="menu2">Locations</span>       
      <span class="item1">Telephones</span>       
      <span class="item2">Computers</span>       
      <span class="item3">Portable MP3 Players</span>       
      <span class="item5">Wisconsin</span>       
      <span class="item4">Idaho</span>    </div>    </body>

例:

スタイルシートをサポートするブラウザ上では同じ視覚表現でありながら、スタイルシートの適用されないときにはより意味に即した表現を提供しているのが次の例です。構造的なマークアップ（定義リスト）がコンテンツに適用されています。HTMLブラウザでは定義リストはDD要素にあらかじめ設定されたマージンとともに表示されるので、マージンを0に設定したことに注意してください。

図は、適切なマークアップに対してスタイルシートが適用されていればスタイルシートが適用されていないときと同じように見え、テキストは単語の列というよりも定義リストとして表示されることを示しています。

    
<head>
<style type="text/css">
<!--
.item1 {
   left: 0em;
   margin: 0px;
   position: absolute;
   top: 7em;
}
.item2 {
   left: 0em;
   margin: 0px;
   position: absolute;
   top: 8em;
}
.item3 {
   left: 0em;
   margin: 0px;
   position: absolute;
   top: 9em;
}
.item4 {
   left: 14em;
   margin: 0px;
   position: absolute;
   top: 7em;
}
.item5 {
   left: 14em;
   margin: 0px;
   position: absolute;
   top: 8em;
}
.menu1 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 0em;
   margin: 0px;
   position: absolute;
   top: 3em;
}
.menu2 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 10em;
   margin: 0px;
   position: absolute;
   top: 3em;
}
#box {
   left: 5em;
   position: absolute;
   top: 5em;
}
-->
</style>
</head>
<body>
<div class="box">
  <dl>
    <dt class="menu1">Products</dt>
    <dd class="item1">Telephones</dd>
    <dd class="item2">Computers</dd>
    <dd class="item3">Portable MP3 Players</dd>
    <dt class="menu2">Locations</dt>
    <dd class="item4">Idaho</dd>
    <dd class="item5">Wisconsin</dd>
    </dt>
  </dl>
</div>
</body>

例示したソースにスタイルシートが適用されていない状態で、配慮をもって変化した表示

13.2 スクリプティングとスタイルシート

タスク:

プレースホルダー

編集者注記：このセクションはECMAscriptとスタイルシートを論ずるはずです。それは実際にあるアクセシブルな例を参照すべきです。以前使われていた例はMWCの例または"会社"でした。ホストとなる言語に他のもの（HTMLばかりでなくSVGやMathML）を使った例はどうでしょう？コンテンツの表示/非表示、移動、色の変化を説明してください。スクリプトの導師が開発し、そしてHTMLテクニックに含めるべきでしょうか？

13.3 表現によって意味を伝える

タスク:

プレースホルダー

編集者注記: プレースホルダー for 論点199

14. 参考文献

CSS1: "Cascading Style Sheets, level 1," B. Bos, H. Wium Lie, eds., W3C Recommendation 17 Dec 1996, revised 11 Jan 1999. Available at http://www.w3.org/TR/REC-CSS1.
CSS2: "Cascading Style Sheets, level 2," B. Bos, H. Wium Lie, C. Lilley, and I. Jacobs, eds., W3C Recommendation 12 May 1998. Available at http://www.w3.org/TR/REC-CSS2.
CSS21: "Cascading Style Sheets, level 2 revision 1," B. Bos, T. ・elik, I. Hickson, H. Wium Lie, eds., W3C Candidate Recommendation 25 February 2004. Available at: http://www.w3.org/TR/CSS21
CSS3: [CSS 2.1 and CSS 3] Roadmap, CSS WG's table of modules and publication dates.
HTML4: "HTML 4.01 Specification," D. Raggett, A. Le Hors, I. Jacobs, eds., W3C Recommendation 24 December 1999. Available at http://www.w3.org/TR/html401/
SMIL2: "Synchronized Multimedia Integration Language (SMIL 2.0)," Jeff Ayars, et al, eds., W3C Recommendation 07 August 2001. Available at http://www.w3.org/TR/SMIL2/
SVG11: "Scalable Vector Graphics (SVG) 1.1 Specification," Jon Ferraiolo, ・ゆ旺羞・(FUJISAWA Jun), and Dean Jackson, eds., W3C Recommendation 14 January 2003. Available at: http://www.w3.org/TR/SVG11/
WCAG10-CSS-TECHS: "CSS Techniques for Web Content Accessibility Guidelines 1.0," W. Chisholm, G. Vanderheiden, and I. Jacobs, eds. W3C Note 6 November 2000. Available at: http://www.w3.org/TR/WCAG10-CSS-TECHS/.
WCAG20: "Web Content Accessibility Guidelines 2.0," B. Caldwell, W. Chisholm, J. White, and G. Vanderheiden, eds., W3C Working Draft 19 November 2004. This W3C Working Draft is available at http://www.w3.org/TR/2004/WD-WCAG20-20041119. The latest version of WCAG 2.0 is available at http://www.w3.org/TR/WCAG20/
XHTML1: "XHTML 1.0 The Extensible HyperText Markup Language (Second Edition)," S. Pemberton, et al., W3C Recommendation 26 January 2000, revised 1 August 2002. Available at: http://www.w3.org/TR/xhtml1/.

WCAG 2.0のためのCSSテクニック

W3C ワーキングドラフト 2005年6月30日

要約

この文書のステータス

目次

附録

なぜCSSなのか?

将来の作業

1. 構文と基本データ型

1.1 変化させる必要のあるプロパティ値にはemもしくは%を使用する

タスク:

例:

例:

1.2 変化させる必要のないプロパティ値にはpxを使用する

タスク:

例:

2. セレクタ

2.1 個々の文字や行を選択する

タスク:

例:

例:

リソース:

2.2 コンテンツの代替表現にアクセスする

タスク:

例:

3. メディアタイプ

3.1 メディアタイプ

タスク:

4. ボックスモデル

4.1 ボーダーを作成する

タスク:

例:

リソース:

4.2 マージン

タスク:

5. 視覚整形モデルと視覚効果

5.1 文字表記の方向を指定する

タスク:

リソース:

5.2 レイアウト、位置、レイヤー、並びを指定する

タスク:

5.3 位置決めをする（float、position）

タスク:

5.4 コンテンツの表示・非表示

タスク:

5.5 form要素の不可視ラベルを作る

タスク:

ユーザーエージェントについての注記：

例:

例:

リソース:

6. コンテンツ生成、自動ナンバリングとリスト

6.1 スタイルシートの生成したコンテンツに等価なテキストを提供する

タスク:

6.2 付加的な構造情報を提供する

タスク:

例:

例:

例:

6.3 リストマーカーを変えるためにスタイルシートを使う

タスク:

例:

例:

リソース:

7. 色と背景

7.1 色を指定する

タスク:

リソース:

7.2 色を6桁の値または名前（オプション）で指定する

タスク:

ユーザーエージェントについての注記：

例:

リソース:

7.3 前景と背景にコントラストを作る

タスク:

リソース:

7.4 背景色と前景色を指定する

タスク:

8. フォント

8.1 代替フォントを指定する