contents

【注意】 この文書は、W3Cが技術ノートとして公開している「CSS Techniques for Web Content Accessibility Guidelines 1.0 (http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20001106/)」を、ZSPCが個人的に翻訳したものです。この技術ノートの正式な基準となる文書は、あくまでW3Cのサイト内にある英語版であり、この文書には翻訳上の間違いや不適切な表現が含まれている可能性がありますのでご注意ください。

[ZSPCホーム] [ZSPC資料集]


W3C

ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 CSS技術書

2000年11月6日 W3C技術ノート

本版オリジナル:
http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20001106/
( プレーンテキスト形式PostScript形式PDF形式HTML形式tar/gzip圧縮HTML形式ZIP圧縮 )
最新版オリジナル:
http://www.w3.org/TR/WCAG10-CSS-TECHS/
直前版オリジナル:
http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20000920/
オリジナル版編集者:
Wendy Chisholm, W3C;
Gregg Vanderheiden, Trace R & D Center, University of Wisconsin -- Madison;
Ian Jacobs, 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のメンバーによって検討や是認が行われた文書ではありません。これらの一連の文書は、1つのファイルから成る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勧告とその他の技術文書の一覧も用意されています。


1 一貫した部分を増やし、メンテナンスを減らす

該当するチェックポイント: 14.3 全体を通して一貫したスタイルの表現方法をとるようにする。[優先度3]

2 ユーザーによるスタイルの上書き

該当するチェックポイント: 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 寸法の単位

該当するチェックポイント: 3.4 マークアップ言語の属性の値やスタイルシートのプロパティの値には、絶対的な大きさを表す単位ではなく、相対的な大きさを表す単位を使用する。 [優先度2]

テクニック:

【例】

フォントサイズの指定には、次のように「em」を使用する。

   H1 { font-size: 2em }

次のような指定は好ましくない。

   H1 { font-size: 12pt }

【例終了】

【例】

相対的な長さの単位とパーセンテージを使用する。

   BODY { margin-left: 15%; margin-right: 10%}

【例終了】

【例】

絶対的な長さの単位は、出力媒体の物理的特性がわかっているものに対してのみ使用する。

   .businesscard { font-size: 8pt }

【例終了】

4 CSSによる内容の追加

該当するチェックポイント:

テクニック:

CSS2には、スタイルシートによって内容を追加することのできる以下のような仕組が備わっています。

追加した内容は、スクロールバーや目次のあるフレームのような視覚的な手掛かりとなるものにアクセスできない場合の、文書操作や位置判断のための目印として働かせることができます。

たとえば、次のようなユーザー・スタイルシートは、文書中で特定のクラス名で指定された例の最後に、「例終了」という言葉を追加します。

【例】

 
DIV.example:after {     
  content: "例終了" 
}

また、ユーザーは、文書中の現在読んでいる位置を把握できるように、段落ごとに連番を振ることもできます。

【例】

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

5 フォント

該当するチェックポイント: 11.2 W3Cのテクノロジーのうち、非推奨となっているものは使用しない。 [優先度2]

テクニック:

【例】

常に予備として総称フォント(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>

【例終了】

6 テキストスタイル

該当するチェックポイント: 7.2 ユーザーエージェントで点滅(blink)に関する設定が可能になるまでは、内容を点滅させることは避ける(つまり、規則的に表示されたり消えたりというような表現は別の表現に変更する)。 [優先度2]

テキストにスタイルを適用するには、以下のCSS2プロパティが使用できます。

7 画像ではなくテキストを使う

該当するチェックポイント: 3.3 レイアウトや表現方法などを制御するにはスタイルシートを使う。 [優先度2]

コンテンツ制作者は、テキストにスタイルを適用させるために画像にするよりは、スタイルシートを使用するべきです。画像ではなくテキストを使うということは、その情報がより多くの(スピーチシンセサイザや点字ディスプレイ、グラフィカルディスプレイなどを使用している)ユーザーに対して利用可能になるということを意味します。スタイルシートを使用することによって、ユーザーが制作者のスタイルを上書きして、色やフォントサイズをより簡単に変更することができるようになります。

もし、テキストに効果(特別なフォント、変形、影など)をつける目的でビットマップを使用する必要がある場合は、そのビットマップはアクセシブルなものでなければなりません(同等の役割を果たすテキスト代わりのページを参照してください)。

【例】

この例で使われている画像には、大きく赤い文字で「例」と書かれています。そして、alt属性の値として同じ文字が入れられています。

<P>これが、その 
   <IMG src="BigRedExample.gif" alt="例"> 
   です。
</P>

【例終了】

8 テキストの表示形式と配置

該当するチェックポイント: 3.3 レイアウトや表現方法などを制御するにはスタイルシートを使う。 [優先度2]

テキストの表示形式と配置を制御するためには、以下のCSS2プロパティを使用することができます。

以下の例は、スタイルシートでドロップキャップ(段落などの1文字目だけを大きくする)の効果を作りだす方法を示しています。

【例】

<HEAD>
<TITLE>ドロップキャップ</TITLE>
<STYLE type="text/css">
      .dropcap { font-size : 120%; font-family : "MS ゴシック" } 
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="dropcap">む</SPAN>かしむかし...
</BODY>

注意:この文書を書いている時点では、最初の1文字を指定できるCSSの疑似要素「:first-letter」は、あまりサポートされていません。(【訳注】上記の例では、font-familyに対して1つのフォントしか指定されていませんが、本来は 5 フォントにあるように総称フォントも指定するべきです。)

9

9.1 色のコントラスト

該当するチェックポイント:

テクニック:

【例】

色を指定する場合には、色の名前ではなく数値を使う。

   H1 {color: #808000}
   H1 {color: rgb(50%,50%,0%)}

【例終了】

【非推奨例】

 H1 {color: red}

【例終了】

色を指定するには、以下のCSSプロパティを使用してください。

前景色と背景色のコントラストは、十分なものにしてください。前景色を指定する場合は、常に背景色も同時に指定するようにしてください(逆も同様)。

9.2 情報を色だけで表現しない

該当するチェックポイント:

色だけを使って情報を伝えることのないようにしてください。たとえば、ユーザーに入力を促す場合に「以下の緑の項目の中から1つ選択してください」などとは書かないでください。そのような場合は、他のスタイル(フォント関連など)を利用したり前後関係(わかりやすくリンクするなど)からそれがわかるようにしてください。

たとえば、この文書の「例」の部分は、デフォルトで以下のような形式にしています(スタイルシートを使用)。

すぐできるテスト法: その文書が色の無い状態でも機能するかどうかをテストするために、モノクロのモニタを使用するか、または色が表示されない状態でブラウザを使って検査してください。また、ブラウザの配色を白と黒、ブラウザセーフの4色のグレーのみを使用するように設定して、そのページを問題なく見ることができるか試してみてください。

すぐできるテスト法: 色覚異常の人や低解像度のモニタを使っている人が見た場合でもコントラストが十分かどうかをテストするには、そのページを白黒のプリンタで印刷してみてください(その際、背景と文字がグレースケールで表示されるようにしてください)。また、印刷したものをコピー、そのコピーをさらにコピーと2〜3回繰り返して、その劣化した状態のもので更に確認してください。これによって、追加する必要のあるもの(ハイパーリンクは、ウェブページ上では通常下線が引かれている)や、小さ過ぎるもの、はっきりと見えないものなどが確認できます。

色とコントラストについてのより詳しい情報については[LIGHTHOUSE]を参照してください。

10 HTMLのリストに前後関係を知る手掛かりを加える

該当するチェックポイント:

コンテンツ制作者は、リストに対して前後関係を知る手掛かりを加えたい場合は、順序を示さない場合は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>

【例終了】

注意:この例は、リスト項目が重なる場合にはそのまま使用することはできません。しかし、少し工夫することで、各リスト項目の終了部分に対して同様のタグ付けをすることができると思われます。

11 割り付け・位置決め・レイヤー・行揃え

該当するチェックポイント:

割り付けや位置決め、レイヤーの使用、行揃えは、スタイルシートで(特にCSSのフロートと絶対配置を使用して)行われるべきものです。

11.1 スペーサーとして画像を使わなければならない場合

見えない画像や透明な画像も含めて、すべての画像に対して同等の役割を果たすテキストをつけるようにしてください。

もし、コンテンツ制作者がスタイルシートを使うことができなくて、しかもページ上の画像をレイアウトするために見えない画像や透明な画像を使わなければならない場合は、その画像に対して「alt=""」を指定するようにしてください。

【非推奨例】

制作者は、画像がロードされなかった場合に、その前後の文字がつながって表示されることを避ける目的で、「alt」の値にスペースを入れないようにしてください。

   my poem requires a big space<IMG src="10pttab.gif" alt="&nbsp;&nbsp;&nbsp;">here

次の例は、グラフィックを特定の位置に表示させるためにスペーサー画像を使用したものです。

   <IMG src="spacer.gif" alt="spacer">
   <IMG src="colorfulwheel.gif" alt="The wheel of fortune">

【例終了】

12 罫線とボーダー

該当するチェックポイント: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>

【例終了】

13 スタイルシートによる配置とうまく変換されるタグ付け

該当するチェックポイント:

CSS2の配置に関するプロパティを使用すると、内容をユーザーの表示領域上の任意の位置に表示させることができます。したがって、画面上に表示される項目の順序は、文書のソース中での順序とは異なっている可能性があります。これ以降に紹介する例によって、次のような原則が示されます。

  1. ブラウザに表示されるテキストは、タグ付けとは異なる順序になる。
  2. 表のように表示させる目的で、CSSの配置に関するプロパティを使うことができる。同じ効果を得る目的で、以前からTABLE要素が使わている。

位置を指定される各オブジェクトに対してクラスを定義している点に注意してください。これ以降に示す例では、「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>

【例終了】

スタイルシートが適用されると、テキストは2つの段として表示されます。「menu1(製品)」と「menu2(所在地)」で指定したクラスは、段の見出しとして表示されます。「電話機、コンピュータ、MP3プレーヤー」は製品の下に、「東京、札幌」は所在地の下に以下のスクリーン・ショットのように表示されます。(【訳注】以下のサンプル画像は、訳者によるハメコミ合成です)。

Screen shot of the example code as it appears when style sheets applied

スタイルシートが適用されない場合は、すべてのテキストが「製品 所在地 電話機 コンピュータ MP3プレーヤー 東京 札幌」のように1行で表示されます。そこに表示される言葉は、ソースに書かれている順番となるわけです。つまり、スタイルシートが適用された場合に段の見出しとなっている言葉が、ソースの最初で定義されているため、最初の言葉になっているということです。以下のスクリーン・ショットは、この状態を示したものです。(【訳注】以下のサンプル画像は、訳者によるハメコミ合成です)。

Screen shot of the example code as it appears without style sheets

以下の例は、スタイルシートがサポートされているブラウザでは同じ表示になると思われますが、スタイルシートが適用されない場合でも、より意味の通る表現をするものです。この例では、内容に対して構造的なタグ(定義リスト)を適用しています。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>

【例終了】

スタイルシートが適用された場合は、最初のスクリーン・ショットと同様に表示されます。しかし、この例ではスタイルシートが適用されなかった場合には、言葉をつなげたものではなく、定義リストとして表示されます。スタイルシートが適用された時に段の見出しとして表示されるものが、スタイルシートが適用されない時には、以下のスクリーンショットで示すように定義語として表示されるわけです。(【訳注】以下のサンプル画像は、訳者によるハメコミ合成です)。

Example code as it appears when style sheets not applied but transform gracefully

注意:ここで紹介した2つの例の違いを実際に体験してみてください:うまく変換されるスタイルシートのテスト・ファイル

14 スタイルシートとスクリプトで動きを与える

該当するチェックポイント: 7.3 ユーザーエージェントで移動する内容を止めることができるようになるまでは、ページ内で内容を移動させることを避ける。 [優先度2]

15 音声カスケーディング・スタイルシート

該当するチェックポイント:11.3 ユーザーが自分の設定(言語やコンテント・タイプなど)に従った文書を受け取ることができるような情報を提供する。 [優先度3]

CSS2の音声関連のプロパティは、見ることのできないユーザーや音声ブラウザのユーザーに対して、フォント関連のプロパティが視覚的な情報を与えるのと同じように情報を伝えます。以下の例では、読みあげられた内容が見出しであることをユーザーに伝えるための音の特性(音声版fontのような「voice-family」も含む)には、どのような種類のものがあるかを示したものです。

【例】

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

CSS2の音声カスケーディング・スタイルシートには、以下のようなプロパティがあります。

さらに、speak-headerプロパティを使用すると、テーブルのヘッダ情報を各セルの前で読み上げるかどうかなども指定できます。

16 内容の代わりとして表現したものへのアクセス

該当するチェックポイント:11.3 ユーザーが自分の設定(言語やコンテント・タイプなど)に従った文書を受け取ることができるような情報を提供する。 [優先度3]

CSS2では、以下に示すものを組合せて使用すると、内容の代わりを表現したものとして属性の値にアクセスできるようになります。

以下の例では、IMG要素の「alt」属性の値が、画像の後に(視覚的または音声などの表現で)表示されます。

【例】

 IMG:after { 
    content: attr(alt) 
 }

属性の値は、画像が表示されない場合でも表示されることに注意してください。(たとえば、ユーザーが設定で画像の表示をオフにしている場合など)。

17 メディアタイプ

該当するチェックポイント:11.3 ユーザーが自分の設定(言語やコンテント・タイプなど)に従った文書を受け取ることができるような情報を提供する。 [優先度3]

CSS2のメディアタイプ(@mediaと共に使用)を使用すると、制作者とユーザーは対象とする装置上でより適切に表現されるスタイルシートを制作することができます。このスタイルシートを使用することによって、点字関連装置やスピーチ・シンセサイザ、TTY機器などの各装置向けの表現をしたコンテンツを用意しておくことができます。「@media」を使用することで、ユーザーエージェントはその装置に該当しない命令を無視できるようになるため、ダウンロード時間を減らすことにもなります。


18 参考文献

W3Cによる各種仕様の最新版については、「W3C Technical Reports(http://www.w3.org/TR/)」を参照してください。

[CSS1]
"CSS, level 1 Recommendation", B. Bos, H. Wium Lie, eds., 17 December 1996, revised 11 January 1999. This CSS1 Recommendation is http://www.w3.org/TR/1999/REC-CSS1-19990111. The latest version of CSS1 is available at http://www.w3.org/TR/REC-CSS1.
[CSS2]
"CSS, level 2 Recommendation", B. Bos, H. Wium Lie, C. Lilley, and I. Jacobs, eds., 12 May 1998. This CSS2 Recommendation is http://www.w3.org/TR/1998/REC-CSS2-19980512/. The latest version of CSS2 is available at http://www.w3.org/TR/REC-CSS2.
[WCAG10]
"Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, and I. Jacobs, eds., 5 May 1999. This WCAG 1.0 Recommendation is http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/.
[WCAG10-TECHS]
"Techniques for Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, I. Jacobs, eds. This document explains how to implement the checkpoints defined in "Web Content Accessibility Guidelines 1.0". The latest draft of the techniques is available at http://www.w3.org/TR/WCAG10-TECHS/.

19 資料集

注意:以下に示す参照先は、読者の便宜をはかるために掲載されたものです。W3Cでは、以下の参照先の内容が常に現状に即しているかどうかについては保証できません。また、製品の紹介についても、それらの動作について保証するものではありません。

19.1 他のガイドライン

[UWSAG]
"The Unified Web Site Accessibility Guidelines", G. Vanderheiden, W. Chisholm, eds. The Unified Web Site Guidelines were compiled by the Trace R & D Center at the University of Wisconsin under funding from the National Institute on Disability and Rehabilitation Research (NIDRR),  U.S. Dept. of Education.

19.2 アクセシビリティ関連

[LIGHTHOUSE]
The Lighthouse provides information about accessible colors and contrasts.

20 謝辞

Web Content Guidelines Working Group Co-Chairs:
Jason White, University of Melbourne
Gregg Vanderheiden, Trace Research and Development
W3C Team contact:
Wendy Chisholm
We wish to thank the following people who have contributed their time and valuable comments to shaping these guidelines:
Harvey Bingham, Kevin Carey, Chetz Colwell, Neal Ewers, Geoff Freed, Al Gilman, Larry Goldberg, Jon Gunderson, Eric Hansen, Phill Jenkins, Leonard Kasday, George Kerscher, Marja-Riitta Koivunen, Josh Krieger, Chuck Letourneau, Scott Luebking, William Loughborough, Murray Maloney, Charles McCathieNevile, MegaZone (Livingston Enterprises), Masafumi Nakane, Mark Novak, Charles Oppermann, Mike Paciello, David Pawson, Michael Pieper, Greg Rosmaita, Liam Quinn, Dave Raggett, T.V. Raman, Robert Savellis, Jutta Treviranus, Steve Tyler, and Jaap van Lelieveld

Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0