WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

F1: 達成基準 1.3.2 の失敗例 - CSS で情報を配置することにより、コンテンツの意味を変えている

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

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

適用(対象)

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

これは、次の達成基準に関連する失敗例である:

解説

これは、コンテンツの視覚的なレイアウトを変更するのに構造的なマークアップではなく CSS が用いられていて、かつ、レイアウトの変更によってコンテンツの意味が変わってしまっているという失敗例について述べている。CSS2 の position プロパティを用いると、利用者のビューポート上のどんな位置にでもコンテンツを表示させることができる。その場合、個々のアイテムが画面上に表示される順序は、ソース文書内に登場する順序とは異なる可能性がある。しかし、支援技術は、コンテンツを正しい順序でレンダリングするために、ソースコードでの順序又はプログラムが解釈する順序を用いている。そのため、CSS によってコンテンツの順序を指定する際には、それによってプログラムで解釈される音声読み上げ順序とは異なる意味になってしまうのであれば、CSS を用いてコンテンツの視覚的な位置を指定しないようにすることが重要である。

事例

失敗例 1

次の例では、段組みのレイアウトを作成するために CSS が不適切に用いられている。また、テキストは、ブラウザの画面ではマークアップの順序とは異なる順序で視覚的に表示される。

この例では、配置される各オブジェクトに対してクラスが定義されている。スタイルシートが適用されると、テキストは 2 つの段組みで表示される。まず、「menu1」クラスの要素(製品)と「menu2」の要素(所在地)は、コラムの見出しとして表示される。そして、「電話機」「コンピューター」「ポータブルMP3プレイヤー」は、製品の下に表示され、「アイダホ」と「ウィスコンシン」は、所在地の下に表示される(アイダホとウィスコンシンの順序は、ソースコードの順序とは異なっている)。

適切な構造要素が使われていないため、スタイルシートが適用されない状況では、全てのテキストがソースの順序に則って1列に提示され、「製品 所在地 電話機 コンピューター ポータブルMP3プレイヤー ウィスコンシン アイダホ」となってしまう。

HTML のコンテンツは次の通り:

コード例:


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

上記コンテンツに対するスタイルは次の通り:

コード例:


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

このコンテンツの場合は、テーブル又は定義リストのように、意味のある要素を用いたほうがよいだろう。

参考リソース

この達成方法に関する参考リソースはない。

検証

チェックポイント

CSS を用いて配置されているコンテンツに対して:

  1. ドキュメントからスタイル情報を取り除く、又はユーザエージェントでスタイルシートの適用をオフにする。

  2. コンテンツの音声読み上げ順序が正しく、コンテンツの意味が変わっていない。

判定基準