邦訳にあたって本文書は、WWW関連技術の標準化団体である World Wide Web Consortium [W3C] が1999年8月4日に公表した、"Accessibility Features of CSS（CSS-access）" の邦訳です。 CSS-access の正式版は、W3C公表の英語版 http://www.w3.org/1999/08/NOTE-CSS-access-19990804 のみです。本邦訳は、W3Cの 文書使用許諾 にもとづき、CYBER@GARDEN代表 益子 貴寛（ましこ たかひろ）が個人的な興味により翻訳したものです。 邦訳にあたっては細心の注意をはらっておりますが、誤訳・表現上の不備等、お気づきの点がごさいましたら、webmaster@cybergarden.net までご連絡をお願い致します。 2003年7月4日 Notes on Japanese Version TranslationThis document is a Japanese version of "Accessibility Features of CSS (CSS-access)", 4 Augest 1999, published by World Wide Web Consortium [W3C]. The normative version of CSS-access is only the English one published by W3C at http://www.w3.org/1999/08/NOTE-CSS-access-19990804. This Japanese version is translated based on private interest according to the document copyright notice of W3C. This Japanese version is translated with meticulous attention, but may include mistakes in some parts. Please send comments about this Japanese version to webmaster@cybergarden.net, if you find errors or inadequacies in terms of expression. July 4, 2003 |
著作権 © 1999 W3C®（マサチューセッツ工科大学（MIT）、フランス国立情報処理自動化研究所（INRIA）、慶應義塾大学）に、すべての権利が保有されている。W3Cの 免責事項、商標, 文書使用許諾 および ソフトウェア使用許諾 に関する規定が適用される。
本文書は、Web文書のアクセシビリティ（アクセスのしやすさ−訳者注）に直接影響を与えるカスケーディングスタイルシート（CSS）レベル2勧告 ([CSS2]) の特徴を要約したものである。本文書で述べているアクセシビリティに関するCSSの特徴には、CSS1 ([CSS1]) ですでに説明しているものもある。本文書はすでに確定した文書であり、したがって、アクセシビリティに関するCSSの特徴を矛盾のないように解釈するために、将来的に他の文書を参照する必要が出てくる場合がある。
本文書は、W3Cにより策定されたW3C注釈（W3C Note）である。本文書はWebアクセシビリティ推進委員会（Web Accessibility Initiative: WAI）の教育・奉仕作業部会（Education and Outreach Working Group: EOWG）、プロトコル・フォーマット作業部会（Protocols and Formats Working Group: PFWG）、および、カスケーディングスタイルシート・プロパティ定式化作業部会（Cascading Style Sheets and Formatting Properties Working Group）によって承認されたものである。
W3C注釈は、W3C会員によって支持されていることを意味するものではない。現在のW3C技術書および公表物の一覧表（草案、注釈を含む）は http://www.w3.org/TR で確認することができる。
CSSはまず、文書構造から表示に関する指定を分離するというかたちで、アクセシビリティに役立つ。スタイルシートは、マークアップ言語によらずに、文字間隔、テキストの配列、オブジェクト（画像等−訳者注）の配置、音声出力、フォントの見映えなどを正確にコントロールすることを意図している。マークアップとスタイルの分離により、文書作成者（author）はHTMLを簡素化し、きれいに保てると同時に、文書のアクセシビリティを高めることができる。
CSSによって間隔（spacing）、配列（alignment）、配置（positioning）を正確にコントロールできるため、文書作成者は「タグの誤用」（tag misuse）（表示上の効果のために構造上の要素を使用すること）を避けられる。例えばHTMLにおいて、<BLOCKQUOTE>は引用を、<TABLE>は表データをマークづけするためのものだが、インデントや配列といった視覚効果のためにこれらの要素が使われることがよくある。音声電子合成装置（speech synthesizer）といった特殊なブラウザーがこのように誤用された要素をそのまま処理した場合、ユーザーが理解できないという結果を引き起こすことになる。
CSSは、要素の誤用を防ぐことに加えて、画像の誤用（image mususe）を減らすことにも役立つ。例えば、文書作成者は内容の配置を考えて、1ピクセルの見えない画像（1-pixel invisible image）を使う場合がある。これは文書を無駄に膨張させるだけでなく、ダウンロードが遅くなり、ユーザーエージェント（ブラウザー等−訳者注）がこのような画像の代替テキスト（「alt」属性）をスムーズに認識できない原因となる。CSSでは配置を指定するためのプロパティがあるから、配置のコントロールのためにもう見えない画像を使う必要はない。
CSSは、フォントサイズ、フォント色、フォントスタイル（太字、イタリック体等−訳者注）を正確にコントロールするのに役立つ。文書作成者はクライアントのPC上で、ある特定のフォントが表示できないと考えた場合、そのフォントをテキストとして表示するために画像処理して使うことがある。画像処理したテキストは、スクリーン音読装置（screen reader）などの特殊なソフトウェアにとってアクセシビリティが低いだけでなく、検索ロボットが検索一覧として表示できないという問題もある。こういった状況を防ぐために、CSSでは非常に効果の高いWebフォント（WebFonts）が利用でき、ユーザーはフォント情報をこれまで以上にクライアント側でコントロールできるようになる。文書作成者はWebフォントを使うことで、優先的に表示させたいフォント（preferred font）がクライアントのPCで表示できない場合でも、クライアント側のフォールバック機能（fallback mechanism）（優先順位に基づいて次のフォント、また次のフォントと代替表示する機能−訳者注）に頼ることができる。
CSSによって、ユーザーは文書作成者の指定したスタイルに優先することができる。これは、文書作成者が指定したフォントや色でページを認識できないユーザーにとって特に重要である。ユーザー独自のスタイルシートを使うことで、自分の好きなフォント、色などで文書を見ることができる。
CSSは、ユーザーが文書の中でいったん読むのを中止したい場合などに、数値やマーカーなどの内容を自動生成するのに役立つ。数値や前後関係を踏まえた目印をアクセシビリティの高いかたちで生成することで、長い一覧や表、文書を読み進めることが容易になる。
CSSは、文書を音声に置き換えて出力する方法を規定した聴覚向けスタイルシート（Aural Style Sheets: ACSS）にも対応している。聴覚向けスタイルシートによって、文書作成者とユーザーは、音声として出力する内容の分量や背景音楽、音量、その他視覚的に出力される装飾されたフォントを上手く電子合成して、音声として出力するといった効果を付け加えるためのプロパティを指定することができる。
CSSは、HTMLだけで作成したよりも、代替的な内容（alternative content）をより正確に表現するようにコントロールするのに役立つ。CSS2のセレクタ（selector）を使えば属性値（attribute value）を指定しやすいが、セレクタは代替的な内容を表現するのによく使われる。CSS2では、属性値はある要素の主な内容とセットで文書の中で表現される。
本注釈の公表時点では、多種多様なブラウザがCSSを一貫して実行していない状況である。しかし、多数の製作会社が開発したブラウザの最新版は、ほとんどのCSS1と大半のCSS2を厳格なかたちで実行しており、さらなる改善が続けられているところである。
本文書で説明しているCSSの特徴がもたらす利便性は、CSS1とCSS2の適切な実行なしには実現しないのは明らかである。本文書には、スタイルシートが無視され、または支持されないとき、本文書がアクセシビリティを維持しようとしていることについて支持を得るための内容が一部含まれている。
多くのブラウザは一貫してCSSを実行しているが、文書作成者についてはまだ、HTMLの表示上の要素とCSSの要素とを混ぜて使っている状況である。HTMLの表示上の要素に代えてCSSを使った文書にすべきであり、例えば表はレイアウトのためには使わず、一連の内容を表示するときに限って使うべきである。
以下は、アクセシビリティに影響のあるCSS2の特徴のリストである（本節で出てくるプロパティ等は、CSS2仕様書で詳しく説明されている）。以下のリストでは、CSS2の特徴がアクセシビリティにどのような影響があるかについて詳しく説明している。
注記: プロパティ名は「'プロパティ名'」（back quotes）というかたちで示してある。これはCSS1仕様書とCSS2仕様書で使用されている用語法である。
CSS2によって、文書作成者はページ上の内容の視覚的な位置関係（visual placement）を、テキストインデント（text indentation）、マージン（margin）、フロート（float）、絶対配置・相対配置（absolute and relative positioning）などでコントロールできる。CSSのプロパティを視覚効果のために使うことで、より簡素なHTMLで文書を作成することができ、配置のために不要な画像や不可視スペース（non-breaking space）（ ）を使わずにすむ。
間隔（spacing）、配列（alignment）、配置（positioning）をコントロールする場合、以下のプロパティを使用する。
ユーザーが優先的にスタイルをコントロールできるように、CSS1で定義された「!important」オペレータの使用法（semantics）をCSS2で変更した。CSS1では、文書作成者が常に優先的にスタイルを決定する仕組みになっていた。だがCSS2では、ユーザー側のスタイルシートが「!important」を含んでいる場合、文書作成者側のスタイルシートに優先して適用されることとなった。このことは、ある配色やコントラストを使いたい、またはある配色やコントラストを避けたいというユーザーや、大きなフォントでページを見たいというユーザーにとって重要な特徴である。例えば以下は、パラグラフ（<P>）内のテキストに大きなフォントサイズを適用する方法であり、この方法で指定されたフォントサイズについては、ユーザー側の指定が優先されることになる。
P { font-size: 24pt ! important }CSS2の 'inherit'（継承）という値（すべてのプロパティで使用可能）は、「!important」を文書全体に適用するのを容易にするものである。例えば以下は、背景色すべてに白を、前景色（テキストの色など−訳者注）すべてに黒を適用する方法である。
/*
文書のBODYについて、
テキストの色に黒を、
背景色に黒を指定。
*/
BODY {
color: black ! important ;
background: white ! important
}
/*
'color' と 'background' の値を他のすべて
の要素に継承させ、!important によって強
調する。
!important をつけた値は、他の特定のユー
ザー側のスタイルによって優先される点に
注意。
*/
* {
color: inherit ! important ;
background: inherit ! important
}
またCSS2には、ユーザー側がコントロールできる以下の特徴が含まれている。
例えば、ある要素を強調（focus）したい場合はその要素の周りに細い黒枠をつけ、ある要素を今見ている（active）場合はその要素の周りに細い赤枠をつけるには、以下の方法を使う。
:focus { outline: thick solid black }
:active { outline: thick solid red }
CSS2では、スタイルシートからある内容を自動生成する仕組みをいくつか備えている。
自動生成内容は、ユーザーが文書を読み進めるのにマーカーを利用したり、スクロールバーや表枠といった視覚的な目印を目で見ることができない場合に、いったんページを読み進めるのを中止するためにマーカーを利用するといったかたちで役立つものである。
例えば以下のように、ユーザー側で要素にある特定のクラス値をつけることで、その文書内の各例示の後に「End Example」という言葉を自動生成することができる。
DIV.example:after {
content: End Example
}
ユーザーはまた、パラグラフに番号をふることができ、その文書内で現在読んでいる場所はどこかを確認することができる。
P:before {
content: counter(paragraph) ". " ;
counter-increment: paragraph
}
CSS2の聴覚向けプロパティ（aural properties）は、目の見えないユーザーや音声ブラウザーのユーザーに対して、視覚的な情報とほぼ同じ情報を提供するためのものである。以下の例は、ユーザーに対して<H1>を音声として表現する場合に、音質（音声フォントとでもいうべき 'voice-family' を含む）をどのようにコントロールするかを示したものである。
H1 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("ping.au")
}
以下のプロパティは、CSS2の聴覚向けスタイルシート（ACSS）の一部である。
さらに、'speak-header' は、表のヘッダー情報（header information）が表の前でどのように読み上げられるかを指定するものである。
CSS2では、属性値と以下をセットで使うことで、ユーザー側で代替的な内容を表現できるようにしている。
以下の例は、<IMG>につける「alt」の属性値を、画像の直後で表現する（視覚的にも聴覚的にも）方法である。
IMG:after { content: attr(alt) }
この場合、<IMG>につけた「alt」の属性値は、画像が表示されなくても（例えば、ユーザー側が画像読み込みをオフにしている場合などでも）、画面に表示される点に注意。
CSS2の「メディアタイプ」（@media とセットで使う）によって、文書が対象とするデバイス（ソフトウェアや出力装置等−訳者注）に適切に読み込まれるように、文書作成者とユーザーがスタイルシートを作成することができる。これらのスタイルシートによって、点字表示装置、音声電子合成装置、キャラクタ端末（キーボードとプリンタから構成される装置−訳者注）向けに内容を調整することができる。また、「@media」を使うことで、ユーザーエージェントが不適切な読み込みをしないですむから、ダウンロード時間の削減にもつながる。
W3CのWebアクセシビリティ推進委員会（Web Accessibility Initiative: WAI）は、以下の5つの活動を通じて、Webアクセシビリティに関する問題に取り組んでいる。
WAIの国際プログラム事務所は、アクセシビリティの高いWeb作成に関心のある企業、身体障害者組織、アクセシビリティ研究組織、行政機関とパートナー関係にある。WAIの支援者には、全米科学財団（National Science Foundation: NSF）と教育省（Department of Education）の付属機関である国立身体障害者・リハビリテーション研究所（National Institute on Disability and Rehabilitation Research）、欧州委員会（European Commission）の身体障害者および高齢者プログラム向けDG XIIIテレマティクス（DG XIII Telematics for Disabled and Elderly Programme）、身体障害者および高齢者向けテレマティクス応用プログラム（Telematics Applications Programme for Disabled and Elderly）、カナダ政府（Government of Canada）、カナダ企業、IBM社、Lotus社、NCR社などがある。
WAIに関する他の情報は、http://www.w3.org/WAI/ で入手可能である。
Webアクセシビリティガイドラインは、Webサイトの開発やWebに関するアプリケーションの開発にとって不可欠なものである。WAIは、以下の3つのガイドラインの実施を管理するために、多くの組織と協力し合って活動している。
W3C勧告および他の技術文書の一覧は、http://www.w3.org/TR で確認することができる。