WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

C6: 構造を示すマークアップをした上で、コンテンツを配置する

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

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

適用(対象)

CSS に対応しているウェブコンテンツ技術全て

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

解説

この達成方法の目的は、スタイルシートが適用されなくても意味の伝わる表現がなされるようにした上で、スタイルシートを使って見栄えをさらに良くする方法を示すことである。CSS2 の配置関連のプロパティを使用すれば、コンテンツを利用者のビューポート内の任意の位置に配置することができる。構造を示す要素を使っていれば、スタイルが適用されていない際でもコンテンツの意味は正しく伝えられる。

事例

事例 1

この事例では、コンテンツに対して構造(定義リスト)を示すマークアップがなされている。そして、コンテンツを段組み形式で表示させるために CSS が使用されている。コンテンツは各クラスの指定でそれぞれの段に絶対配置され、HTML の定義リストを表示する際に dd 要素をインデントするユーザエージェントのデフォルト値を上書きするために、マージンの値を 0 にしている。

表示させるコンテンツは以下の通り:

コード例:

<div class="box">
  <dl>
    <dt class="menu1">製品</dt>
    <dd class="item1">電話</dd>
    <dd class="item2">コンピューター</dd>
    <dd class="item3">ポータブル MP3 プレイヤー</dd>
    <dt class="menu2">所在地</dt>
    <dd class="item4">アイダホ</dd>
    <dd class="item5">ウィスコンシン</dd>
    </dt>
  </dl>
 </div> 

上記要素の配置及び表示指定をする CSS は以下の通り:

コード例:


.item1 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item2 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .item3 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 9em;
 }
 .item4 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item5 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .menu1 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 0;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 .menu2 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 10em;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 #box {
   left: 5em;
   position: absolute;
   top: 5em;
 }  

スタイルシートが適用されると、データは「製品」と「所在地」の 2 段組みで表示される。スタイルシートが適用されない場合は、構造と読み上げ順序を保持した状態の定義リストとしてテキストが表示される。

検証

チェックポイント

CSS で表示位置を調整しているコンテンツに対して:

  1. 文書からスタイル情報を取り除く、又はユーザエージェントでスタイルシートを無効にする。

  2. 構造的な関係及びコンテンツの意味が保持されている。

判定基準

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