【注意】 この文書は、W3Cが技術ノートとして公開している「CSS Techniques for Web Content Accessibility Guidelines 1.0 (http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20001106/)」を、ZSPCが個人的に翻訳したものです。この技術ノートの正式な基準となる文書は、あくまでW3Cのサイト内にある英語版であり、この文書には翻訳上の間違いや不適切な表現が含まれている可能性がありますのでご注意ください。
Copyright
©1999 - 2000 W3C® (MIT,
INRIA, Keio), All Rights
Reserved.
この文書のすべての原著作権は、W3C(マサチューセッツ工科大学・フランス国立情報処理自動化研究所・慶應義塾大学)が保有します。また、この文書には、W3Cの「免責事項」「商標」「文書利用許諾」「ソフトウェア使用許諾」で示される規定が適用されます。
この文書は、アクセシブルなカスケーディング・スタイルシート (CSS) を制作するための手法を解説したものです。カスケーディング・スタイルシートは、W3Cの勧告である「CSS Level 1」[CSS1] と「CSS Level 2」 [CSS2] で定義されています。この文書は、「ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0」([WCAG10]) に適合した文書を制作したいと考えるウェブコンテンツ制作者の手助けとなることを意図したものです。ただし、この文書に書かれている手法は、「ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0」に適合したCSSを制作しようとする人の手助けになるとは思われますが、上記のガイドラインに適合することを保証するものではありませんし、適合させるための唯一の方法でもありません。
この文書は、アクセシブルなウェブコンテンツを制作するための一連の技術文書の中の一編です。関連する他の文書については、「ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 技術書」[WCAG10-TECHS] を参照してください。
注意：この文書にはCSSでのアクセシブルなソリューションのための多くの例文が掲載されていますが、その中にはコンテンツ制作者がするべきではない事を説明するための非推奨例も含まれています。非推奨例は目立つようにはしてありますが、それらはあくまで説明のためだけに掲載されているという点に注意してください。
本版は、前の版にあったいくつかのリンク切れ部分を修正したものです。
この2000年11月6日版の文書は、ウェブコンテンツ・アクセシビリティ・ガイドライン・ワーキンググループ (WCAG WG) によって作成および是認された一連の技術ノートの中の一文書です。この技術ノートは、W3Cのメンバーによって検討や是認が行われた文書ではありません。これらの一連の文書は、１つのファイルから成る1999年5月5日版のW3C技術ノート「ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 技術書」に置き換わるものです。初期の文書で項目として分けられていた部分は、本版ではそれぞれ個別に発展させたテクノロジー別の文書に分割されました。テクノロジー別のより小さな文書に分けられたことによって、特定のテクノロジーに焦点を絞って利用することもできます。
「ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0」の勧告 [WCAG10] に書かれている内容は永続的なものですが、この姉妹編である一連の文書は、テクノロジーの変化やコンテンツ制作者によって発見されるアクセシブルなウェブデザインのためのより効果的な手法などに応じて発展させていく予定です。
この一連の文書には、更新履歴のほか未解決の問題および解決済の問題の一覧も用意されています。文書に対するコメントや現在抱えている問題に対する解決策などがありましたら、ぜひお寄せください。ワーキンググループ宛のこの文書に関するコメントは、「w3c-wai-gl@w3.org」までお送りください。公開されたアーカイブも用意されています。
この文書は、英語版が唯一の正式な基準文書となっていますが、他の言語への翻訳版もあります。
この文書で見つかった誤りの一覧については「ウェブコンテンツ・アクセシビリティ・ガイドライン正誤表」を参照してください。また、この文書内で誤りを発見された場合は、「wai-wcag-editor@w3.org」まで、ぜひご連絡ください。
World Wide Web Consortium (W3C) の Web Accessibility Initiative (WAI) では、様々なウェブアクセシビリティに関する資料や情報を提供しています。WAI アクセシビリティ・ガイドラインは、「WAI Technical Activity」の活動の一環として作成されたものです。 WCAGワーキング・グループの目的については、「the charter」に記載されています。
現在のW3C勧告とその他の技術文書の一覧も用意されています。
該当するチェックポイント： 14.3 全体を通して一貫したスタイルの表現方法をとるようにする。[優先度3]
該当するチェックポイント： 11.2 W3Cのテクノロジーのうち、非推奨となっているものは使用しない。 [優先度2]
ユーザーがスタイルを確実にコントロールできるようにする目的で、CSS2では、CSS1で定義されていた「!important」オペレータの意味を変更しました。CSS1の場合は、制作者は常にスタイル全体に渡って、それを最終的に決定する権利を持っていました。CSS2の場合は、もしユーザーのスタイルシートに「!important」が指定されていれば、その部分は制作者のスタイルシートのどんな指定よりも優先されます。これは、特定の色の組合せやコントラストを必要としたり、逆に避ける必要のあるユーザー、大きなサイズのフォントで表示させる必要のあるユーザーなどにとって重要な機能です。下の例では、段落(paragraph)内のテキストに対して大きなフォントサイズを指定しています。そして、この指定は同じウェイトの制作者のルールを上書きします。
【例】
P { font-size: 24pt ! important }
CSS2の「inherit」という値(ほぼすべてのプロパティで使用可能)を利用することによって、文書のほぼ全体に適用させる「!important」スタイル・ルールを簡潔に指定することができます。たとえば、以下のスタイル・ルールは、すべての背景色を白に、すべての前景色を黒にするものです。（【訳注】本文書の9.1 色のコントラストでは、色の指定は名前ではなく数値で行うことを推奨しています。）
【例】
/* 文書の本体部分であるbody要素の
文字色は黒に背景色は白に設定する */
BODY {
color: black ! important ;
background: white ! important
}
/* 「color」と「background」の値は、「!important」
を使って他のすべての要素に継承させる。この指定は、
より細かい他のユーザー・スタイルによって上書きさ
れる場合があることに注意。 */
* {
color: inherit ! important ;
background: inherit ! important
}
CSS2には、次のようなユーザーが制御可能な機能も含まれています。
たとえば、ある要素がフォーカスされた時には回りに太く黒い線を、それがアクティブになった時には回りに太く赤い線を表示させたい場合には、以下のように指定します。
【例】
:focus { outline: thick solid black }
:active { outline: thick solid red }
該当するチェックポイント： 3.4 マークアップ言語の属性の値やスタイルシートのプロパティの値には、絶対的な大きさを表す単位ではなく、相対的な大きさを表す単位を使用する。 [優先度2]
テクニック：
【例】
フォントサイズの指定には、次のように「em」を使用する。
H1 { font-size: 2em }
次のような指定は好ましくない。
H1 { font-size: 12pt }
【例終了】
【例】
相対的な長さの単位とパーセンテージを使用する。
BODY { margin-left: 15%; margin-right: 10%}
【例終了】
【例】
絶対的な長さの単位は、出力媒体の物理的特性がわかっているものに対してのみ使用する。
.businesscard { font-size: 8pt }
【例終了】
該当するチェックポイント：
テクニック：
CSS2には、スタイルシートによって内容を追加することのできる以下のような仕組が備わっています。
追加した内容は、スクロールバーや目次のあるフレームのような視覚的な手掛かりとなるものにアクセスできない場合の、文書操作や位置判断のための目印として働かせることができます。
たとえば、次のようなユーザー・スタイルシートは、文書中で特定のクラス名で指定された例の最後に、「例終了」という言葉を追加します。
【例】
DIV.example:after {
content: "例終了"
}
また、ユーザーは、文書中の現在読んでいる位置を把握できるように、段落ごとに連番を振ることもできます。
【例】
P:before {
content: counter(paragraph) ". " ;
counter-increment: paragraph
}
該当するチェックポイント： 11.2 W3Cのテクノロジーのうち、非推奨となっているものは使用しない。 [優先度2]
テクニック：
代わりにCSSを使うべきHTMLの非推奨フォント関連要素と属性とは、次のものを指す。
【例】
常に予備として総称フォント(generic font)を指定する。
BODY { font-family: "Gill Sans", sans-serif }
【例終了】
【例】
<STYLE type="text/css">
P.important { font-weight: bold }
P.less-important { font-weight: lighter; font-size: smaller }
H2.subsection { font-family: Helvetica, sans-serif }
</STYLE>
【例終了】
該当するチェックポイント： 7.2 ユーザーエージェントで点滅(blink)に関する設定が可能になるまでは、内容を点滅させることは避ける（つまり、規則的に表示されたり消えたりというような表現は別の表現に変更する）。 [優先度2]
テキストにスタイルを適用するには、以下のCSS2プロパティが使用できます。
該当するチェックポイント： 3.3 レイアウトや表現方法などを制御するにはスタイルシートを使う。 [優先度2]
コンテンツ制作者は、テキストにスタイルを適用させるために画像にするよりは、スタイルシートを使用するべきです。画像ではなくテキストを使うということは、その情報がより多くの(スピーチシンセサイザや点字ディスプレイ、グラフィカルディスプレイなどを使用している)ユーザーに対して利用可能になるということを意味します。スタイルシートを使用することによって、ユーザーが制作者のスタイルを上書きして、色やフォントサイズをより簡単に変更することができるようになります。
もし、テキストに効果(特別なフォント、変形、影など)をつける目的でビットマップを使用する必要がある場合は、そのビットマップはアクセシブルなものでなければなりません(同等の役割を果たすテキストと代わりのページを参照してください)。
【例】
この例で使われている画像には、大きく赤い文字で「例」と書かれています。そして、alt属性の値として同じ文字が入れられています。
<P>これが、その <IMG src="BigRedExample.gif" alt="例"> です。 </P>
【例終了】
該当するチェックポイント： 3.3 レイアウトや表現方法などを制御するにはスタイルシートを使う。 [優先度2]
テキストの表示形式と配置を制御するためには、以下のCSS2プロパティを使用することができます。
以下の例は、スタイルシートでドロップキャップ(段落などの１文字目だけを大きくする)の効果を作りだす方法を示しています。
【例】
<HEAD>
<TITLE>ドロップキャップ</TITLE>
<STYLE type="text/css">
.dropcap { font-size : 120%; font-family : "ＭＳ ゴシック" }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="dropcap">む</SPAN>かしむかし...
</BODY>
注意：この文書を書いている時点では、最初の１文字を指定できるCSSの疑似要素「:first-letter」は、あまりサポートされていません。（【訳注】上記の例では、font-familyに対して１つのフォントしか指定されていませんが、本来は 5 フォントにあるように総称フォントも指定するべきです。）
該当するチェックポイント：
テクニック：
【例】
色を指定する場合には、色の名前ではなく数値を使う。
H1 {color: #808000}
H1 {color: rgb(50%,50%,0%)}
【例終了】
【非推奨例】
H1 {color: red}
【例終了】
色を指定するには、以下のCSSプロパティを使用してください。
前景色と背景色のコントラストは、十分なものにしてください。前景色を指定する場合は、常に背景色も同時に指定するようにしてください(逆も同様)。
該当するチェックポイント：
色だけを使って情報を伝えることのないようにしてください。たとえば、ユーザーに入力を促す場合に「以下の緑の項目の中から１つ選択してください」などとは書かないでください。そのような場合は、他のスタイル(フォント関連など)を利用したり前後関係(わかりやすくリンクするなど)からそれがわかるようにしてください。
たとえば、この文書の「例」の部分は、デフォルトで以下のような形式にしています(スタイルシートを使用)。
すぐできるテスト法： その文書が色の無い状態でも機能するかどうかをテストするために、モノクロのモニタを使用するか、または色が表示されない状態でブラウザを使って検査してください。また、ブラウザの配色を白と黒、ブラウザセーフの４色のグレーのみを使用するように設定して、そのページを問題なく見ることができるか試してみてください。
すぐできるテスト法： 色覚異常の人や低解像度のモニタを使っている人が見た場合でもコントラストが十分かどうかをテストするには、そのページを白黒のプリンタで印刷してみてください(その際、背景と文字がグレースケールで表示されるようにしてください)。また、印刷したものをコピー、そのコピーをさらにコピーと２〜３回繰り返して、その劣化した状態のもので更に確認してください。これによって、追加する必要のあるもの(ハイパーリンクは、ウェブページ上では通常下線が引かれている)や、小さ過ぎるもの、はっきりと見えないものなどが確認できます。
色とコントラストについてのより詳しい情報については[LIGHTHOUSE]を参照してください。
該当するチェックポイント：
コンテンツ制作者は、リストに対して前後関係を知る手掛かりを加えたい場合は、順序を示さない場合はUL要素を、順序を示したい場合はOL要素を(要するに適切なタグ付けをして)CSSと組合せて使うようにしてください。
以下の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>
【例終了】
CSS2がユーザーエージェントに広くサポートされるか、リストの表現の仕方を他の方法で制御できるようになるまでの間、制作者は入れ子になったリストに対して前後関係を知る手掛かりをつけることを検討してみてください。以下に示すようなCSS1の仕組を利用すると、スタイルシートが有効になっている場合に、関連するリスト項目の終了を知らせる言葉を隠すことができます。スタイルシートがオフにされている場合、およびユーザースタイルシートで言葉を隠すスタイルを上書きしている場合、スタイルシートがサポートされていない場合は、終了を知らせる言葉が示されます。
【例】
<STYLE type="text/css">
.endoflist { display: none }
</STYLE>
<UL>
<LI>紙：
<UL>
<LI>封筒
<LI>ノート
<LI>便箋
<LI>ポスター用紙
<span class="endoflist">(紙終了)</span>
</UL>
<LI>ペン：
<UL>
<LI>青ボールペン
<LI>ホワイトボード用ペン
<span class="endoflist">(ペン終了)</span>
</UL>
<LI>留め具：
<UL>
<LI>クリップ
<LI>ホッチキス
<LI>ヒモ
<span class="endoflist">(留め具終了)</span>
</UL>
<span class="endoflist">(事務用品終了)</span>
</UL>
【例終了】
注意：この例は、リスト項目が重なる場合にはそのまま使用することはできません。しかし、少し工夫することで、各リスト項目の終了部分に対して同様のタグ付けをすることができると思われます。
該当するチェックポイント：
割り付けや位置決め、レイヤーの使用、行揃えは、スタイルシートで(特にCSSのフロートと絶対配置を使用して)行われるべきものです。
見えない画像や透明な画像も含めて、すべての画像に対して同等の役割を果たすテキストをつけるようにしてください。
もし、コンテンツ制作者がスタイルシートを使うことができなくて、しかもページ上の画像をレイアウトするために見えない画像や透明な画像を使わなければならない場合は、その画像に対して「alt=""」を指定するようにしてください。
【非推奨例】
制作者は、画像がロードされなかった場合に、その前後の文字がつながって表示されることを避ける目的で、「alt」の値にスペースを入れないようにしてください。
my poem requires a big space<IMG src="10pttab.gif" alt=" ">here
次の例は、グラフィックを特定の位置に表示させるためにスペーサー画像を使用したものです。
<IMG src="spacer.gif" alt="spacer"> <IMG src="colorfulwheel.gif" alt="The wheel of fortune">
【例終了】
該当するチェックポイント：6.1 スタイルシートなしでも読めるように、構造のしっかりとした文書を作る。たとえば、そのHTML文書に指定してあるスタイルシートが無い状態でも、その文書を読むことが可能でなければならない。 [優先度1]
罫線とボーダーは、それが見えるユーザーに対しては「その位置で分離している」という意味を伝えるかもしれませんが、視覚的に確認できなければその意味を知ることはできません。
ボーダーに関するスタイルを指定するには、CSSのプロパティを使用してください。
罫線やボーダーを表示させる場合は、スタイルシートを使用してください。
【例】
この例では、H1要素の内容から1em上の位置に2pxの太さの赤いボーダーを表示します。
<HEAD>
<TITLE>Redline with style sheets</TITLE>
<STYLE type="text/css">
H1 { padding-top: 1em; border-top: 2px red }
</STYLE>
</HEAD>
<BODY>
<H1>Chapter 8 - Auditory and Tactile Displays</H1>
</BODY>
【例終了】
もし、構造を示す目的で罫線(例：HR要素)を使う場合は、同様の構造が視覚的な方法以外でも伝わるようにしてください。(たとえば、構造を示すタグを付けるなど)。
【例】
この例では、ナビゲーション・バーを作るために横罫線を含んだ形でDIV要素を使用しています。
<DIV class="navigation-bar">
<HR>
<A rel="Next" href="next.html">[Next page]</A>
<A rel="Previous" href="previous.html">[Prevous page]</A>
<A rel="First" href="first.html">[First page]</A>
</DIV>
【例終了】
該当するチェックポイント：
CSS2の配置に関するプロパティを使用すると、内容をユーザーの表示領域上の任意の位置に表示させることができます。したがって、画面上に表示される項目の順序は、文書のソース中での順序とは異なっている可能性があります。これ以降に紹介する例によって、次のような原則が示されます。
位置を指定される各オブジェクトに対してクラスを定義している点に注意してください。これ以降に示す例では、「class」の代わりに「id」を使うこともできます。実際に使う場合の例として考えると、オブジェクトは複数箇所で使用されユニークではなくなることもありますので、ここでは「class」を使用しています。
【非推奨例】
<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">製品</span>
<span class="menu2">所在地</span>
<span class="item1">電話機</span>
<span class="item2">コンピュータ</span>
<span class="item3">MP3プレーヤー</span>
<span class="item5">東京</span>
<span class="item4">札幌</span>
</div>
</body>
【例終了】
スタイルシートが適用されると、テキストは２つの段として表示されます。「menu1(製品)」と「menu2(所在地)」で指定したクラスは、段の見出しとして表示されます。「電話機、コンピュータ、MP3プレーヤー」は製品の下に、「東京、札幌」は所在地の下に以下のスクリーン・ショットのように表示されます。（【訳注】以下のサンプル画像は、訳者によるハメコミ合成です）。
スタイルシートが適用されない場合は、すべてのテキストが「製品 所在地 電話機 コンピュータ MP3プレーヤー 東京 札幌」のように１行で表示されます。そこに表示される言葉は、ソースに書かれている順番となるわけです。つまり、スタイルシートが適用された場合に段の見出しとなっている言葉が、ソースの最初で定義されているため、最初の言葉になっているということです。以下のスクリーン・ショットは、この状態を示したものです。（【訳注】以下のサンプル画像は、訳者によるハメコミ合成です）。
以下の例は、スタイルシートがサポートされているブラウザでは同じ表示になると思われますが、スタイルシートが適用されない場合でも、より意味の通る表現をするものです。この例では、内容に対して構造的なタグ(定義リスト)を適用しています。HTMLブラウザでは、定義リストのDD要素に対してマージンを付加して表示するため、マージンを0に設定していることに注意してください。
【例】
<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">
<dl>
<dt class="menu1">製品</dt>
<dd class="item1">電話機</dd>
<dd class="item2">コンピュータ</dd>
<dd class="item3">MP3プレーヤー</dd>
<dt class="menu2">所在地</dt>
<dd class="item4">札幌</span>
<dd class="item5">東京</span>
</dt>
</dl>
</div>
</body>
【例終了】
スタイルシートが適用された場合は、最初のスクリーン・ショットと同様に表示されます。しかし、この例ではスタイルシートが適用されなかった場合には、言葉をつなげたものではなく、定義リストとして表示されます。スタイルシートが適用された時に段の見出しとして表示されるものが、スタイルシートが適用されない時には、以下のスクリーンショットで示すように定義語として表示されるわけです。（【訳注】以下のサンプル画像は、訳者によるハメコミ合成です）。
注意：ここで紹介した２つの例の違いを実際に体験してみてください：うまく変換されるスタイルシートのテスト・ファイル。
該当するチェックポイント： 7.3 ユーザーエージェントで移動する内容を止めることができるようになるまでは、ページ内で内容を移動させることを避ける。 [優先度2]
該当するチェックポイント：11.3 ユーザーが自分の設定(言語やコンテント・タイプなど)に従った文書を受け取ることができるような情報を提供する。 [優先度3]
CSS2の音声関連のプロパティは、見ることのできないユーザーや音声ブラウザのユーザーに対して、フォント関連のプロパティが視覚的な情報を与えるのと同じように情報を伝えます。以下の例では、読みあげられた内容が見出しであることをユーザーに伝えるための音の特性(音声版fontのような「voice-family」も含む)には、どのような種類のものがあるかを示したものです。
【例】
H1 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("ping.au")
}
CSS2の音声カスケーディング・スタイルシートには、以下のようなプロパティがあります。
さらに、speak-headerプロパティを使用すると、テーブルのヘッダ情報を各セルの前で読み上げるかどうかなども指定できます。
該当するチェックポイント：11.3 ユーザーが自分の設定(言語やコンテント・タイプなど)に従った文書を受け取ることができるような情報を提供する。 [優先度3]
CSS2では、以下に示すものを組合せて使用すると、内容の代わりを表現したものとして属性の値にアクセスできるようになります。
以下の例では、IMG要素の「alt」属性の値が、画像の後に(視覚的または音声などの表現で)表示されます。
【例】
IMG:after {
content: attr(alt)
}
属性の値は、画像が表示されない場合でも表示されることに注意してください。（たとえば、ユーザーが設定で画像の表示をオフにしている場合など）。
該当するチェックポイント：11.3 ユーザーが自分の設定(言語やコンテント・タイプなど)に従った文書を受け取ることができるような情報を提供する。 [優先度3]
CSS2のメディアタイプ(@mediaと共に使用)を使用すると、制作者とユーザーは対象とする装置上でより適切に表現されるスタイルシートを制作することができます。このスタイルシートを使用することによって、点字関連装置やスピーチ・シンセサイザ、TTY機器などの各装置向けの表現をしたコンテンツを用意しておくことができます。「@media」を使用することで、ユーザーエージェントはその装置に該当しない命令を無視できるようになるため、ダウンロード時間を減らすことにもなります。
W3Cによる各種仕様の最新版については、「W3C Technical Reports(http://www.w3.org/TR/)」を参照してください。
注意：以下に示す参照先は、読者の便宜をはかるために掲載されたものです。W3Cでは、以下の参照先の内容が常に現状に即しているかどうかについては保証できません。また、製品の紹介についても、それらの動作について保証するものではありません。
