構造を示すマークアップに基づいてコンテンツを配置する

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

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

適用 (対象)

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

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

解説

この達成方法の目的は、スタイルシートが適用されていない場合でも意味のある提示を維持しながら、スタイルシートを介して視覚的外観をどのように向上させることができるかを示すことである。CSS2 の配置プロパティを使用して、コンテンツを利用者のビューポートの任意の位置に表示できる。構造的な要素を使用することで、スタイルが利用できない場合でもコンテンツの意味を判断できることを保証する。

事例

例 1

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

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

 <div class="box">
  <dl>
    <dt class="menu1">Products</dt>
    <dd class="item1">Telephones</dd>
    <dd class="item2">Computers</dd>
    <dd class="item3">Portable MP3 Players</dd>
    <dt class="menu2">Locations</dt>
    <dd class="item4">Idaho</dd>
    <dd class="item5">Wisconsin</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. 構造的な関係及びコンテンツの意味が保持されていることを確認する。

期待される結果

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