【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
CSS をサポートするすべての達成方法
これは、次の達成基準に関連する達成方法である:
C18 に関するユーザエージェントサポートノートを参照のこと。
ウェブデザイナーは、レイアウト、例えばテーブルまたは段落の字下げをよりよくコントロールするために、しばしばスペーサー画像 (通常は 1 x 1 ピクセルの透過 GIF) を使用する。しかしながら、カスケーディング スタイル シート (CSS) は、スペーサー画像を置き換えることで、レイアウトを十分によりよくコントロールすることができる。マージンとパディングの CSS プロパティは、レイアウトを制御するために単独または組み合わせて使用できる。マージンプロパティ (「margin-top」、「margin-right」, 「margin-bottom」、「margin-left」とショートハンドの「margin」) は、ブロックとして表示される任意の要素に使用でき、要素の外側にスペースを追加する。パディングプロパティ (「padding-top」、「padding-right」、「padding-bottom」、「padding-left」とショートハンドの「padding」) は、任意の要素に使用でき、要素の内側にスペースを追加する。
次の例は、二つの部品で構成されている。テーブルの全ての面にマージンとテーブルセルにパディングを指定している CSS コードと、スペース画像を含まず、他のテーブル内にネストされていないテーブルの HTML コード。
コード例:
table { margin: .5em; border-collapse: collapse; }
td, th { padding: .4em; border: 1px solid #000; }
...
<table summary="Titles, authors and publication dates of books in Web development category">
<caption>Books in the category 'Web development'</caption>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>How to Think Straight About Web Standards</td>
<td>Andrew Stanovich</td>
<td>1 April 2007</td>
</tr>
</tbody>
</table>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注: padding 及び margin 関連プロパティは、CSS Box Model Module Level 3 で再定義されている。
この達成方法に利用可能な検証はない。