邦訳にあたって

本文書は、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日

CYBER@GARDENのホームへ戻る


Notes on Japanese Version Translation

This 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

[Back to Home of CYBER@GARDEN]




W3C

アクセシビリティに関するCSSの特徴

W3C注釈 1999年8月4日公表

本版:
http://www.w3.org/1999/08/NOTE-CSS-access-19990804
旧版:
http://www.w3.org/1999/06/NOTE-CSS-access-19990616
最新版:
http://www.w3.org/TR/CSS-access
編集者:
Ian Jacobs (ij@w3.org)
Judy Brewer (jbrewer@w3.org)

概要

本文書は、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の実行

本注釈の公表時点では、多種多様なブラウザがCSSを一貫して実行していない状況である。しかし、多数の製作会社が開発したブラウザの最新版は、ほとんどのCSS1と大半のCSS2を厳格なかたちで実行しており、さらなる改善が続けられているところである。

本文書で説明しているCSSの特徴がもたらす利便性は、CSS1とCSS2の適切な実行なしには実現しないのは明らかである。本文書には、スタイルシートが無視され、または支持されないとき、本文書がアクセシビリティを維持しようとしていることについて支持を得るための内容が一部含まれている。

多くのブラウザは一貫してCSSを実行しているが、文書作成者についてはまだ、HTMLの表示上の要素とCSSの要素とを混ぜて使っている状況である。HTMLの表示上の要素に代えてCSSを使った文書にすべきであり、例えば表はレイアウトのためには使わず、一連の内容を表示するときに限って使うべきである。

アクセシビリティに関するCSS2の特徴

以下は、アクセシビリティに影響のあるCSS2の特徴のリストである(本節で出てくるプロパティ等は、CSS2仕様書で詳しく説明されている)。以下のリストでは、CSS2の特徴がアクセシビリティにどのような影響があるかについて詳しく説明している。

注記: プロパティ名は「'プロパティ名'」(back quotes)というかたちで示してある。これはCSS1仕様書とCSS2仕様書で使用されている用語法である。

間隔(spacing)、配列(alignment)、配置(positioning)
'text-indent' (16.1)。
'text-align' (16.2)。
'word-spacing'、'letter-spacing' (16.4)。
'font-stretch' (15.2.3)。
'margin'、'margin-top'、'margin-right'、'margin-bottom'、'margin-left' (8.3)。
'float' (9.5.1)、'position' (9.3.1)。
'top'、'right'、'bottom'、'left' (9.3.2)。
'empty-cells' (17.6.1) 。
ユーザー側のスタイル優先(user override of styles)
!important (6.4.1)。
the 'inherit' value (6.2.1)。
system fonts (15.2.5)。
system colors (18.2)。
list types (12.6.2)。 dynamic outlines ('outline'、'outline-width'、'outline-style'、'outline-color') (18.4)。
自動生成内容(generated content)
:before/:after pseudo-elements (5.12.3、12.1)。
'content' (12.2)。 'cue'、'cue-before'、'cue-after' (19.5)。
聴覚向けスタイルシート(aural style sheets: ACSS)
'volume' (19.2)。
'speak' (19.3)。
'pause'、'pause-before'、'pause-after' (19.4)。
'cue'、'cue-before'、'cue-after' (19.5)。
'play-during' (19.6)。
'azimuth'、'elevation' (19.7)。
'speech-rate'、'voice-family'、'pitch'、'pitch-range'、'stress'、'richness' (19.8)。
'speak-punctuation'、'speak-numeral' (19.9)。
内容の代替表現(access to alternative content)
属性セレクタ(attribute selectors) (5.8)。
attr() 機能 (12.2)。
Webフォント(WebFonts)
CSS2仕様書の第15章を参照。

間隔(spacing)、配列(alignment)、配置(positioning)

CSS2によって、文書作成者はページ上の内容の視覚的な位置関係(visual placement)を、テキストインデント(text indentation)、マージン(margin)、フロート(float)、絶対配置・相対配置(absolute and relative positioning)などでコントロールできる。CSSのプロパティを視覚効果のために使うことで、より簡素なHTMLで文書を作成することができ、配置のために不要な画像や不可視スペース(non-breaking space)(&nbsp;)を使わずにすむ。

間隔(spacing)、配列(alignment)、配置(positioning)をコントロールする場合、以下のプロパティを使用する。

ユーザー側のスタイル優先(user override of styles)

ユーザーが優先的にスタイルをコントロールできるように、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 }

自動生成内容(generated content)

CSS2では、スタイルシートからある内容を自動生成する仕組みをいくつか備えている。

自動生成内容は、ユーザーが文書を読み進めるのにマーカーを利用したり、スクロールバーや表枠といった視覚的な目印を目で見ることができない場合に、いったんページを読み進めるのを中止するためにマーカーを利用するといったかたちで役立つものである。

例えば以下のように、ユーザー側で要素にある特定のクラス値をつけることで、その文書内の各例示の後に「End Example」という言葉を自動生成することができる。

DIV.example:after { 
   content: End Example 
}

ユーザーはまた、パラグラフに番号をふることができ、その文書内で現在読んでいる場所はどこかを確認することができる。

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

聴覚向けスタイルシート(ACSS)

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)が表の前でどのように読み上げられるかを指定するものである。

内容の代替表現(access to alternative representations of content)

CSS2では、属性値と以下をセットで使うことで、ユーザー側で代替的な内容を表現できるようにしている。

以下の例は、<IMG>につける「alt」の属性値を、画像の直後で表現する(視覚的にも聴覚的にも)方法である。

IMG:after { content: attr(alt) }

この場合、<IMG>につけた「alt」の属性値は、画像が表示されなくても(例えば、ユーザー側が画像読み込みをオフにしている場合などでも)、画面に表示される点に注意。

メディアタイプ(media types)

CSS2の「メディアタイプ」(@media とセットで使う)によって、文書が対象とするデバイス(ソフトウェアや出力装置等−訳者注)に適切に読み込まれるように、文書作成者とユーザーがスタイルシートを作成することができる。これらのスタイルシートによって、点字表示装置、音声電子合成装置、キャラクタ端末(キーボードとプリンタから構成される装置−訳者注)向けに内容を調整することができる。また、「@media」を使うことで、ユーザーエージェントが不適切な読み込みをしないですむから、ダウンロード時間の削減にもつながる。

Webアクセシビリティ推進委員会について
(About the Web Accessibility Initiative)

W3CのWebアクセシビリティ推進委員会(Web Accessibility Initiative: WAI)は、以下の5つの活動を通じて、Webアクセシビリティに関する問題に取り組んでいる。

  1. Web技術がアクセシビリティに役立つことを保証する。
  2. アクセシビリティガイドラインを策定する。
  3. Webサイトの評価・修復を容易にするツールを開発する。
  4. 教育・奉仕活動を管理する。
  5. 研究・開発活動を指揮する。

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/ で入手可能である。

WAI公表のWebアクセシビリティガイドラインについて
(About the WAI Web Accessibility Guidelines)

Webアクセシビリティガイドラインは、Webサイトの開発やWebに関するアプリケーションの開発にとって不可欠なものである。WAIは、以下の3つのガイドラインの実施を管理するために、多くの組織と協力し合って活動している。

WWWコンソーシアム(W3C)について
(About the World Wide Web Consortium [W3C])

WWWコンソーシアム(W3C)は、Webの共通プロトコル(common protocols)を開発し、その共用性(Interoperability)を評価し、保証することによって、Webがその高い潜在性を発揮できるようにするために設立された。マサチューセッツ工科大学計算機科学研究所(MIT, LCS)、フランス国立情報処理自動化研究所(INRIA)、慶応義塾大学がホストとしてW3Cを共同運営している。W3Cが提供するサービスには、開発者とユーザーのためのWWWに関する情報の蓄積、WWWの基準をまとめ、その実施を促進するための勧告等の策定、新技術の使用方法を説明するための試用・サンプルアプリケーションの作成が含まれる。現在、320以上の組織がW3Cの会員となっている。W3Cに関する他の情報は、http://www.w3.org/ で入手可能である。

参考資料(References)

W3C勧告および他の技術文書の一覧は、http://www.w3.org/TR で確認することができる。

[CSS2]
「CSSレベル2勧告」、B. Bos, H. W. Lie, C. Lilley, and I. Jacobs編、1998年5月12日公表。
[CSS1]
「CSSレベル1勧告」、H. W. Lie and B. Bos編、1996年12月17日公表、1999年1月11日改訂。
[HTML40]
「HTML 4.0勧告」、D. Raggett, A. Le Hors, and I. Jacobs編、1997年12月18日公表、1998年4月24日改訂。
[XML10]
「XML 1.0勧告」、T. Bray, J. Paoli, C.M. Sperberg-McQueen編、1998年2月10日公表。
[WAI-AUTOOLS]
「オーサリングツールアクセシビリティガイドライン」の最新版, J. Treviranus, J. Richards, I. Jacobs, C. McCathieNevile編。
[WAI-WEBCONTENT]
「Webコンテンツアクセシビリティガイドライン 1.0」、W. Chisholm, G. Vanderheiden, and I. Jacobs編、1999年5月5日公表。
[WAI-USERAGENT]
「ユーザーエージェントアクセシビリティガイドライン」の最新版、J. Gunderson and I. Jacobs編。