WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

C22: テキストの視覚的な表現を制御するために、CSS を使用する

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

CSSをサポートする全てのウェブコンテンツ技術

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、CSSを使ってテキストの視覚的な表現を制御する方法を実践することである。これにより利用者が要求を満たすたように、ユーザエージェントを通してテキストの視覚的な特徴を変更できるようになる。テキストの特徴にはサイズ、色、書体、相対配置などの外観を含んでいる。

CSSは主に表現からドキュメント構造を分離することによってアクセシビリティに有益さを与える。スタイルシートは、マークアップの外部から字間、文字配列、ページにおけるオブジェクトの配置、音声やスピーチのアウトプット、フォントなどの正確な制御ができるように設計されている。マークアップからスタイルを分離することにより、コンテンツ制作者はコンテンツの中でマークアップを単純化し、整理することができ、同時によりアクセシブルにすることができる。

画像内にあるテキストはいくつかのアクセシビリティ上の問題があり、以下のことができない:

適切な視覚的表現を作り出すためには、これらの要素のテキスト部分には、テキストを使い、セマンティックマークアップとスタイルシートの組み合わせを用いるとよい。このことが効果的に作用するために、利用者のシステム上で利用できると思われるフォントを選び、定義された最初のフォントを持たない利用者のために代替フォントを定義する。最新のマシンとユーザエージェントはしばしばすべてのテキストにスムーズもしくはアンチエイリアスをかけている。そのため見出しやボタンは画像化された文字に頼ることなくこれらのシステム上できれいに表示される。

次のCSSのプロパティは、テキストのスタイルを指定し、画像化された文字を使う必要性を回避するのに有効である:

事例

事例 1: フォントファミリーを制御するためにCSSのfont-familyを使用する。

XHTML:

コード例:

<p>Javascriptで文字列を変換して大文字にする方法は<code>toUpperCase()</code>である。</p>

CSS:

コード例:

code { font-family:"Courier New", Courier, monospace }

事例 2: テキストの配置(配列)を制御するためにCSSのtext-alignを使用する。

XHTML:

コード例:

<p class="right">このテキストは表示域の右側にあるべきである。</p>

CSS:

コード例:

.right { text-align: right; }

事例 3: テキストのサイズを制御するためにCSSのfont-size を使用する。

XHTML:

コード例:

<p>2008年<strong class="largersize">3月</strong>9日</p>

CSS:

コード例:

strong.largersize { font-size: 1.5em; }

事例 4: テキストの色を制御するためにCSSのcolorを使用する。

注記: この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。

XHTML:

コード例:

<p>2008年<em class="highlight">3月</em>9日</p>

CSS:

コード例:

.highlight{ color: red; }

事例 5: イタリック体のテキストにするためにCSSのfont-styleを使用する。

注記: この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。

XHTML:

コード例:

<p>この記事は <a href="http://www.example.com" class="featuredsite">内分泌学のブログ</a>で入手可能である。</p>

CSS:

コード例:

.featuredsite{ font-style:italic; }

事例 6: テキストの太さを制御するためにCSSのfont-weightを使用する。

注記: この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。

XHTML:

コード例:

<p>この取引は <span class="highlight">今</span>利用可能です!</p>

CSS:

コード例:

.highlight { font-weight:bold; color:#990000; }

事例 7: テキストの大文字小文字の区別を制御するためにCSSのtext-transformを使用する。

注記: この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。

XHTML:

コード例:

<p>2008年 <span class="caps">3月</span> 9日</p>

CSS:

コード例:

.caps { text-transform:uppercase; }

事例 8: テキストの行間を制御するためにCSSのline-heightを使用する。

CSSのline-heightプロパティを使って、段落の行間をフォントの高さの2倍に表示する。

XHTML:

コード例:

<p>人とその人の運命についての考察はいつも<br />  
全ての技術的な試みの最重要な関心を形成する。 <br />
あなたの図式と方程式においてそれを忘れてはいけない。 </p>

CSS:

コード例:

p { line-height:2em; }

CSSのline-heightプロパティを使って、テキストの行間をフォントの高さより少なく表示させる。テキストの2行目は、テキストの1行目の後に配置されて、あたかも1行目の一部だがやや下がっているように見える。

XHTML:

コード例:

<h1 class="overlap"><span class="upper">本日の</span><br />
<span class="byline">ニュース</span></h1>

CSS:

コード例:

.overlap { line-height:0.2em;  }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; }

事例 9: 文字間を設定するためにCSSのletter-spacingを使用する。

CSSのletter-spacingプロパティを使って、テキストの2行目では、文字をより接近させて表示する。

XHTML:

コード例:

<h1 class="overlap"><span class="upper">本日の</span><br />
<span class="byline">ニュース</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プロパティを使って、テキストの2行目では、文字をより接近させて表示する。【訳注:おそらく原文が間違っています。WCAGワーキンググループに確認中です。】

XHTMLの構成:

コード例:

<h1 class="upper2">ニュース</h1>

CSS:

コード例:

.upper2 { text-transform:uppercase; letter-spacing:1em; }

事例 10: テキストと画像をレイヤー化するためにCSSのbackground-imageを使用する。

CSSのfont-styleプロパティを使って、バナーのテキスト要素を表示させ、background-imageプロパティを使って、テキストの後ろの画像を表示させる。

XHTML:

コード例:

<div id="banner"><span id="bannerstyle1">地域の審議会へ</span> 
<span id="bannerstyle2">ようこそ</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; 
}

事例 11: テキストの最初の行の表現を制御するためにCSSのfirst-lineを使用する。

CSSの:first-line擬似クラスを使って、最初の行をより大きなサイズで赤色に表示する。

XHTML:

コード例:

<p class="startline">むかしむかし...<br />
...遠い地で, 遠くへ...  </p>

CSS:

コード例:

.startline:first-line { font-size:2em; color:#990000; }

事例 12: テキストの最初の文字の表現を制御するためにCSSのfirst-letterを使用する。

CSSの:first-letter擬似クラスを使って、最初の文字をより大きなサイズで赤く、縦位置を中央揃えにして表示する。

XHTML:

コード例:

<p class="startletter">むかしむかし...</p>

CSS:

コード例:

.startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. CSSのプロパティを用いてテキストの視覚的な表現を制御している。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。