このページには、前バージョン(2008年12月11日版の日本語訳)から修正(追加、変更または削除)された箇所があります。
設定:全ての修正を非表示   |   削除箇所を表示/非表示  |   問題No.を表示/非表示   |   [ここから] / [ここまで] を表示/非表示   |   全ての修正を表示

表示サンプル: このページの修正箇所は次のように表示されます。

WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

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

適用(対象)

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. 構造的な関係及びコンテンツの意味が保持されている。

判定基準

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

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。