テキストの視覚的提示を制御するために、CSS を使用する

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

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

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

解説

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

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

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

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

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

訳注 1

first-line 疑似クラス、:first-letter 疑似クラス、:before 疑似クラス、:after 疑似クラスが挙げられているが、これらは全て疑似要素であり、原文の誤りである。

訳注 2

MDN の疑似要素 (Pseudo-elements) に示されているように、例えば :after 疑似要素について、コロンを 1 個のみ用いるのは古い、互換性のための構文である。コロンを 2 個置くのが現在の正式な構文であることに注意されたい。

事例

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

XHTML:

<p>The Javascript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>

CSS:

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

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

XHTML:

<p class="right">This text should be to the right of the viewport.</p>  

CSS:

.right { text-align: right; }

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

XHTML:

<p>09 <strong class="largersize">March</strong> 2008</p>  

CSS:

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

MDN の strong 要素で示されているように、現在の HTML では strong を重要性を表すものと定義している。

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

注記

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

XHTML:

<p>09 <em class="highlight">March</em> 2008</p>  

CSS:

.highlight{ color: red; }

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

注記

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

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; }

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

注記

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

XHTML:

<p>This deal is available <span class="highlight">now!</span></p> 

CSS:

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

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

注記

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

XHTML:

<p>09 <span class="caps">March</span> 2008</p>  

CSS:

.caps { text-transform:uppercase; }

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

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; }

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

訳注

原文では、一つ目の説明文が二つ目のコードの説明、二つ目の説明文が一つ目のコードの説明と「さかさま」になっているが、翻訳では正しい組み合わせに修正している。

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; }

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

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; 
}

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

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; }

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

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

XHTML:

<p class="startletter">Once upon a time...</p>  

CSS:

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

参考リソース

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

検証

手順

  1. CSS のプロパティを用いてテキストの視覚的提示を制御しているかどうかを確認する。

期待される結果

  • #1 の結果が真である。