Accessibility Features of CSS 日本語版

この文書はW3Cの"Accessibility Features of CSS"を翻訳したものです。この邦訳には誤りが含まれている可能性があります。

この文書の原文は英語で、

http://www.w3.org/1999/08/NOTE-CSS-access-19990804
にあります。 また最新の原文のURIは
http://www.w3.org/TR/CSS-access
です。

原文の著作権については

http://www.w3.org/Consortium/Legal/
をご覧ください。この邦訳の著作権も原文に準じるものとし、この邦訳によって生じたいかなる損害の責任は負いません。

邦訳の最新版:

http://www.argv.org/~chome/translations/JP-CSS-access.html

この邦訳:

http://www.argv.org/~chome/translations/JP-CSS-access-20021015.html

訳者 中尾圭佐(chome@argv.org)

Valid HTML 4.0!


W3C

Accessibility Features of CSS

W3C NOTE 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])の特徴を要約したものです。この文書にあるアクセシビリティの特徴のいくつかは、CSS1([CSS1]) にも書かれています。この文書は、他の文書が一貫性のある方法で、CSS によるアクセシビリティの特徴について参照することができるようにするためのものです。

この文書の立場

この文書は W3C が公開した注釈です。この注釈は、Web アクセシビリティ・イニシアティブ (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 は、アクセシビリティ向上につながります。 スタイルシートは(マークアップ外の)文字間隔、テキストの位置合せ、ページのオブジェクトポジション、オーディオ、及び、スピーチ出力、フォント特性等の、正確な操作を可能にするように設計されていました。 スタイルから、マークアップを分離することによって、ページ製作者は、アクセシビリティを向上させると同時に、文書の HTML をシンプルに、きれいにすることができます。

CSS は、間隔、位置合せ、及び位置決めに対する正確に操作することができます。ページ製作者はこれによって、見た目のために構造化用タグを間違って使ってしまう「タグの誤用」を防ぐことができます。 例えば、HTML の BLOCKQUOTE や TABLE タグは、引用部分と表のデータをマークアップすることを意味していますが、インデントや位置合わせのような視覚効果のかわりに頻繁に使われています。 スピーチシンセサイザーのような特別なブラウザがこのように誤用されたタグに遭遇した時、ユーザはわけがわからなくなります。

タグの誤用に加え、スタイルシートは画像の誤用も減らすことに役立ちます。たとえばページ製作者はときどき 1 ピクセルの見えない画像を位置を合わせるために使います。 これはドキュメントをふくれ上がらせてダウンロードを遅くするばかりではなく、これらのイメージのための代替テキスト ( 「 alt 」属性 ) を捜すソフトウェアエージェントを混乱させることがあります。 CSS 位置決めプロパティによって、位置決めのための不可視画像をもう使う必要はありません。

CSS はフォントサイズ、色、及び、スタイルに対する正確なコントロールを行います。クライアントであるフォントが使えるかどうか確信が持てないとき、そのフォントでテキストを表すためにイメージを使うことがあります。 画像によるテキストはスクリーンリーダーのような特殊なソフトで読めないばかりか、サーチロボットの一覧に載せることもできません。 このような状況を改善するために、CSS の強力な WebFont でクライアント側のフォント情報をはるかに大きく操作できます。 WebFont を使うことによって、ページ製作者の好きなフォントが利用可能ではないとき、クライアント上の fallback メカニズムに頼ることができます。 ページ製作者の仕様にそって、フォントは似たもの代用にされ、そしてもちろん Web からダウンロードすることもできます。

CSS ではユーザがページ製作者の設定したスタイルを再設定することができます。 これはページ製作者が選んだフォントや色が知覚することのできないユーザにとってとても重要です。 CSS は、ユーザがスタイルシートを定義することで、好きなフォントや色等で見ることができます。

CSS は、数字、マーカ等を自動的に生成します。これは数字か文脈上の手がかりがアクセシブルな方法で提供されているならば、長いリスト、テーブル、やドキュメントが見やすくなります。

CSS はドキュメントが音に変換された時にどのような音を出すか指定する、オーラルスタイルシートをサポートしています。 オーラルスタイルシート(あるいは略して「 ACSS 」)はページ製作者及びユーザーが内容、バックグラウンド音、音場のプロパティ、合成音を視覚的な出力のためにフォントを使ったドキュメントに追加することができる多くのプロパティを指定することができます。

CSS は代替内容を表示する機能を提供し、 HTML だけの時と比べるとより正確にコントロールできます。 CSS2 セレクターはアクセスする属性値を与え、時には代替内容を提供する時に使います。 CSS2 で属性値は、エレメントの一次内容と共にドキュメントで変換されるかもしれません。

CSS の実装

この NOTE の発表の時点で、広く普及しているブラウザには一貫した CSS は実装されていませんが、いくつものベンダーから CSS1 のほとんどと、CSS2 の多くの実装がデモンストレーションされており、向上しつづけています。

言うまでもなく CSS1 と CSS2 の完全な実現なしに、この文書に書かれている特色の恩恵を得ることはできません。 CSS を使ってアクセシブルなドキュメントを設計することには、スタイルシートを OFF にしても、ブラウザが CSSを サポートしていなくても、アクセシブルでありつづける必要があります。

大部分のブラウザが CSS を一貫してサポートするまで、コンテンツ製作者はアクセシブルなドキュメントを、HTML のいくつかのプレゼンテーション機能と CSS の機能を混ぜて作成してもよいでしょう。 CSS の代わりの HTML プレゼンテーション機能を使ったドキュメントはうまく変換されなければなりません。 たとえば連続して変換したとき、レイアウトのために使われたテーブルは意味のあるものでなければいけません。

CSS2 のアクセシビリティ機能

次の CSS2 機能リストはアクセシビリティに影響する(そして CSS2 仕様で定義されている)ものです。 リストに続いて、いかにアクセシビリティに影響するかが詳しく書かれています。

注:プロパティ名はバッククオートで囲まれています。この慣行は CSS1、CSS2 仕様で使われているものです。

間隔、整列、配置
'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)
ユーザーによるスタイルの再定義
!important (6.4.1); 'inherit'値 (6.2.1); システムフォント (15.2.5); システムカラー (18.2); リストタイプ (12.6.2); ダイナミックアウトライン ('outline', 'outline-width', 'outline-style', 'outline-color') (18.4)
自動生成する内容
擬似エレメントの :before と :after (5.12.3, 12.1); 'content' (12.2); 'cue', 'cue-before', 'cue-after' (19.5)
オーラルスタイルシート
'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' and 'speak-numeral' (19.9)
代替内容へのアクセス
属性セレクタ (5.8); attr() 関数 (12.2)
WebFont
CSS2 仕様第 15 章を参照

間隔、整列、配置

ページ製作者は CSS2 によって視覚的なコンテンツを、インデント、マージン、フロートを通じて、絶対的、相対的に配置することができます。 視覚的な効果を出すために CSS プロパティを用いると、ページ作成者はシンプルな HTML を書くことができて、配置のために使っている画像や改行なしのスペース( )を除去することができます。

次のプロパティは、間隔、整列、配置をコントロールします。

ユーザによるスタイルの再定義

ユーザーがスタイルをコントロールすることができることを保証するために CSS2 は CSS1 で定義された「 !important 」オペレータのセマンティクスを変更します。 CSS1 ではページ作成者がいつもスタイルの最終決定権を持っていました。 CSS2 ではもしユーザのスタイルシートに「 !important 」オペレータが含まれていたら、それはページ作成者のスタイルシートのあらゆる規則に優先します。 これは決まった色の組み合わせ又はコントラストを防ぐことが必要なユーザや、大きなフォントを必要とするユーザにとって重要なことです。 たとえば、ページ製作者のスタイルを再定義して、パラグラフテキストに大きなフォントサイズを指定するときは次のようにします。

P { font-size: 24pt ! important }

CSS2 において値の継承は、ドキュメントのほとんど又は全てを支配する「 !important 」スタイル規則をコンパクトにします。たとえば全ての背景色を白に、文字色を黒に指定するときは次のようにします。

 
 /*
 文書全体を文字色を黒に、背景色を白に指定する
 */

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 }

生成されるコンテンツ

CSS2 はコンテンツをスタイルシートが生成することができるいくつかのメカニズムがあります。

生成された内容はマーカーとしてユーザがページを見やすくし、スクロールバー、テーブルフレーム等といった視覚的手がかりにアクセスできないとき方向付けに役立ちます。

たとえばユーザースタイルシートは、特別なクラスのあとに"End Example"という文字列を生成すします。

DIV.example:after { 
   content: End Example 
}

ユーザはまた、ドキュメント中現在読んでいる場所を突き止めるためにたとえば数字を段落に挿入できます。

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

オーラルカスケードスタイルシート

CSS2 のオーラルカスケードスタイルシートは視力のないユーザとボイスブラウザのユーザに、フォントが視覚情報を提供するのと同様に情報を提供します。 次の例で音声の内容がヘッダであることを知らせるのにいろいろな音が使えることをしめしています。

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

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

さらに 'speak-header' プロパティはテーブルセルの前に、テーブルヘッダ情報をどのように読むか示します。

代替内容へのアクセス

ユーザは次に示すものを使って属性で指定した代替内容へアクセスすることができます

次の例では IMG エレメントの "alt" 属性の値が画像の後に(視覚的、聴覚的などに)変換されます。

IMG:after { content: attr(alt) }
たとえ画像が表示されないとしても(すなわちユーザが画像の表示を OFF にしていたとしても)、属性値は表示されることに注意。

メディアタイプ

ページ製作者とユーザは、CSS2 の「メディアタイプ」(@media ルールを使う) によってよりふさわしい、確実なターゲットデバイス向けに変換するスタイルシートを設計することができます。 これらのスタイルシートは点字デバイス、スピーチシンセサイザー、又は tty デバイス用に、内容を仕立てることができます。 "@media" ルールを使うとユーザーエージェントが不要なルールを無視することができるのでダウンロード時間を節約することができます。

Web アクセシビリティ・イニシアティブについて

W3C のウェブ・アクセシビリティ・イニシアティブ (WAI) は、5項目の補足活動を通じて Webアクセシビリティに取り組んでいます。

  1. アクセシビリティをサポートする Web 技術を確保する。
  2. アクセシビリティ・ガイドラインを広める。
  3. Web サイトを評価及び改善支援ツールの開発
  4. 教育
  5. 研究、開発活動

Web のアクセス可能性創出に利害のある、産業、障害者団体、アクセシビリティ研究団体、政府は、WAI の国際プログラム事務局と提携することができます。 WAI の後援には、the US National Science Foundation and Department of Education's National Institute on Disability and Rehabilitation Research; the European Commission's DG XIII Telematics for Disabled and Elderly Programme; Telematics Applications Programme for Disabled and Elderly; Government of Canada, Industry Canada; IBM, Lotus Development Corporation, NCR が含まれています。

WAI に関するこのほかの情報は、http://www.w3.org/WAI/にあります。

WAI Web アクセシビリティ・ガイドラインについて

Web アクセス可能性のガイドラインは、ウェブサイト開発、 WWW 関連のアプリケーション開発に不可欠です。 WAI は3セットのガイドラインを作るために多くの団体の調整しています。

ワールド・ワイド・ウエブ・コンソーシアム (W3C) について

W3C は Web の発展とインターオペラビリティを可能にすることを促進する一般プロトコルを開発することで、Web の最大限の可能性を引き出すために設立されました。 これはアメリカ合衆国の MIT コンピュータ研究所(LCS)、フランスの国立コンピュータ科学・制御研究所(INRIA)、日本にある慶応大学共同の国際産業共同体です。 このコンソーシアムが提供するサービスは、開発者、ユーザーのためのワールドワイドウェブに関する情報の保管、具体化及び促進のためのリファレンス実装、そして新しい技術の様々な、プロトタイプ、サンプルアプリケーションが含まれています。 現在までに320以上の団体が当コンソーシアムのメンバとなっています。 ワールド・ワイド・ウェブ・コンソーシアムについてのこのほかの情報はhttp://www.w3.org/をご覧ください。

参考文献

現在の W3C 勧告及びその他の技術文書のリストは、http://www.w3.org/TRにあります。

[CSS2]
"Cascading Style Sheets, level 2", B. Bos, H. W. Lie, C. Lilley, and I. Jacobs, 17 May 1998.
[CSS1]
"Cascading Style Sheets, level 1", H. W. Lie and B. Bos, 17 December 1996. Revised 11 January 1999.
[HTML40]
"HTML 4.0 Recommendation", D. Raggett, A. Le Hors, and I. Jacobs, eds., 18 December 1997, revised 24 April 1998.
[XML10]
"Extensible Markup Language (XML) 1.0.", T. Bray, J. Paoli, C.M. Sperberg-McQueen, eds., 10 February 1998.
[WAI-AUTOOLS]
Latest version of "Authoring Tool Accessibility Guidelines", J. Treviranus, J. Richards, I. Jacobs, C. McCathieNevile, eds.
[WAI-WEBCONTENT]
"Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, and I. Jacobs, eds., 5 May 1999
[WAI-USERAGENT]
Latest version of "User Agent Accessibility Guidelines", J. Gunderson and I. Jacobs, eds.