【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
CSS をサポートする全てのウェブコンテンツ技術
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、CSS を使ってテキストの視覚的な提示を制御する方法を実践することである。これにより利用者が要求を満たすたように、ユーザエージェントを通してテキストの視覚的な特徴を変更できるようになる。テキストの特徴にはサイズ、色、書体、相対配置などの外観を含んでいる。
CSS は主に提示からドキュメント構造を分離することによってアクセシビリティに有益さを与える。スタイルシートは、マークアップの外部から字間、文字配列、ページにおけるオブジェクトの配置、音声やスピーチのアウトプット、フォントなどの正確な制御ができるように設計されている。マークアップからスタイルを分離することにより、コンテンツ制作者はコンテンツの中でマークアップを単純化し、整理することができ、同時によりアクセシブルにすることができる。
画像内にあるテキストはいくつかのアクセシビリティ上の問題があり、以下のことができない:
ブラウザの設定に応じて大きさを調整する
ブラウザの設定、又は利用者定義のスタイルシートのルールによって指定された色で表示する
ハイコントラストといった、オペレーティングシステムの設定を反映させる
適切な視覚的表現を作り出すためには、これらの要素のテキスト部分には、テキストを使い、セマンティックマークアップとスタイルシートの組み合わせを用いるとよい。このことが効果的に作用するために、利用者のシステム上で利用できると思われるフォントを選び、定義された最初のフォントを持たない利用者のために代替フォントを定義する。最新のマシンとユーザエージェントはしばしばすべてのテキストにスムーズもしくはアンチエイリアスをかけている。そのため見出しやボタンは文字画像に頼ることなくこれらのシステム上できれいに表示される。
次の CSS のプロパティは、テキストのスタイルを指定し、画像のテキストを使う必要性を回避するのに有効である:
font-family プロパティを使って、文字の外観を等幅フォントで表示する。
text-align プロパティを使って、表示域の右側にテキストを表示する。
font-size プロパティを使って、テキストをより大きいサイズで表示する。
font-style プロパティを使って、テキストをイタリック体で表示する。
font-weight プロパティを使って、テキストの文字をどのくらい太く又は細く表示すべきか設定する。
color プロパティを使って、テキストやテキストコンテナに色を表示する。
line-height プロパティを使って、テキストのブロックに対してラインの高さを指定する。
text-transform プロパティを使って、テキストの文字 (大文字小文字の区別) を制御する。
letter-spacing プロパティを使って、テキストの文字間隔を制御する。
background-image プロパティを使って、非テキストの背景上にテキストを表示させることができる。
first-line 疑似クラスを使って、テキストのブロックにおける最初の行の提示を修正することができる。
:first-letter 疑似クラスを使って、テキストのブロックにおける最初の文字の提示を修正することができる。
:before と :after 疑似クラスを使って、テキストのブロックの前後に装飾的な非テキストコンテンツを挿入することができる。
訳注 1:
first-line 疑似クラス、:first-letter 疑似クラス、:before 疑似クラス、:after 疑似クラスが挙げられているが、これらは全て疑似要素であり、原文の誤りである。
訳注 2:
MDN の疑似要素 (Pseudo-elements) に示されているように、例えば :after 疑似要素について、コロンを 1 個のみ用いるのは古い、互換性のための構文である。コロンを 2 個置くのが現在の正式な構文であることに注意されたい。
XHTML:
コード例:
<p>The Javascript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>
CSS:
コード例:
code { font-family:"Courier New", Courier, monospace }XHTML:
コード例:
<p class="right">This text should be to the right of the viewport.</p>
CSS:
コード例:
.right { text-align: right; }XHTML:
コード例:
<p>09 <strong class="largersize">March</strong> 2008</p>
CSS:
コード例:
strong.largersize { font-size: 1.5em; }訳注: MDN の strong 要素で示されているように、現在の HTML では strong を重要性を表すものと定義している。
注記: この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。
XHTML:
コード例:
<p>09 <em class="highlight">March</em> 2008</p>
CSS:
コード例:
.highlight{ color: red; }注記: この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。
XHTML:
コード例:
<p>The article is available in the <a href="http://www.example.com" class="featuredsite">Endocrinology
Blog</a>.</p>
CSS:
コード例:
.featuredsite{ font-style:italic; }注記: この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。
XHTML:
コード例:
<p>This deal is available <span class="highlight">now!</span></p>
CSS:
コード例:
.highlight { font-weight:bold; color:#990000; }注記: この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。
XHTML:
コード例:
<p>09 <span class="caps">March</span> 2008</p>
CSS:
コード例:
.caps { text-transform:uppercase; }CSS の line-height プロパティを使って、段落の行間をフォントの高さの 2 倍に表示する。
XHTML:
コード例:
<p>Concern for man and his fate must always form the<br />
chief interest of all technical endeavors. <br />
Never forget this in the midst of your diagrams and equations. </p>
CSS:
コード例:
p { line-height:2em; }CSS の line-height プロパティを使って、テキストの行間をフォントの高さより少なく表示させる。テキストの 2 行目は、テキストの 1 行目の後に配置されて、あたかも 1 行目の一部だがやや下がっているように見える。
XHTML:
コード例:
<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>
CSS:
コード例:
.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; }訳注: 原文では、一つ目の説明文が二つ目のコードの説明、二つ目の説明文が一つ目のコードの説明と「さかさま」になっているが、翻訳では正しい組み合わせに修正している。
CSS の letter-spacing プロパティは、2 行目のテキストでより近い文字を表示するために使用される。
XHTML:
コード例:
<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>
CSS:
コード例:
.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; letter-spacing:-0.1em; }CSS の letter-spacing プロパティは、見出しでさらに離れた文字を表示するために使用される。
XHTML の構成:
コード例:
<h1 class="upper2">News</h1>
CSS:
コード例:
.upper2 { text-transform:uppercase; letter-spacing:1em; }CSS の font-style プロパティを使って、バナーのテキスト要素を表示させ、background-image プロパティを使って、テキストの後ろの画像を表示させる。
XHTML:
コード例:
<div id="banner"><span id="bannerstyle1">Welcome</span>
<span id="bannerstyle2">to your local city council</span></div>
CSS:
コード例:
#banner {
color:white;
background-image:url(banner-bg.gif);
background-repeat:no-repeat;
background-color:#003399;
width:29em;
}
#bannerstyle1 {
text-transform:uppercase;
font-weight:bold;
font-size:2.5em;
}
#bannerstyle2 {
font-style:italic;
font-weight:bold;
letter-spacing:-0.1em;
font-size:1.5em;
}CSS の :first-line 疑似クラスを使って、最初の行をより大きなサイズで赤色に表示する。
XHTML:
コード例:
<p class="startline">Once upon a time...<br />
...in a land far, far away... </p>
CSS:
コード例:
.startline:first-line { font-size:2em; color:#990000; }CSS の :first-letter 疑似クラスを使って、最初の文字をより大きなサイズで赤く、縦位置を中央揃えにして表示する。
XHTML:
コード例:
<p class="startletter">Once upon a time...</p>
CSS:
コード例:
.startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
CSS のプロパティを用いてテキストの視覚的提示を制御しているかどうかを確認する。
1. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。