th
要素、caption
要素、又は空ではないsummary
属性を用いているHTML 及び XHTML
これは次の達成基準に関する不適合事例である:
この不適合事例では、レイアウトだけの目的でテーブルが用いられている際に、th
要素、summary
属性、またはcaption
要素が使用されている場合に発生する不適合について解説する。このような場合、プレゼンテーションを制御するためだけに構造的(又はセマンティックな)マークアップが使われているため不適合となる。HTMLおよびXHTMLのtable
要素は、データを表現するためのものである。
レイアウトテーブルの中で用いられることは少ないが、以下の構造的なマークアップもレイアウトテーブル内で用いられると達成基準1.3.1に不適合となる:
headers
属性
scope
属性
支援技術は、HTML及びXHTMLのテーブルに含まれる構造的な情報を用いて、利用者に対してデータを論理的な形で伝えるようになっている。th
要素は、行や列の見出しを表すために用いられる。スクリーンリーダーを利用している場合、表の中を移動しながら読む時、移動した先のセルの行や列の見出しを読み上げるためにth
要素の内容が利用される。summary
属性は、その表の目的や機能についてのテキストによる説明を提供するために用いられ、利用者はスクリーンリーダーを用いてこの情報を得ることができる。caption
要素は表の一部であり、その表を特定する役割を持つ。
WCAG 2.0ではレイアウトテーブルの使用を禁じてはいないが、HTMLで定義されているテーブル関聨の要素が持つセマンティックを保持し、プレゼンテーションとコンテンツを分離して記述するコーディング・スタイルを遵守するためにも、CSSによるレイアウトを行うことが推奨される。テーブルレイアウトを行う際には、th
要素を用いてはならない。この場合、この表はデータを示しているわけではないから、どのセルも行や列の見出しとしてマークアップする必要はない。同様に、レイアウトテーブルを実現するだけのために用いられている表について、追加の説明を提供する必要はない。summary
属性は使用するべきではなく、またsummary
属性を使って、たとえば「レイアウトテーブル」のような説明を追加するべきではない。このような情報が記述された場合、スクリーンリーダーを使ってコンテンツを利用している利用者に有用な情報が提供されないだけでなく、ナビゲーションの邪魔になる。レイアウトテーブルに値が空のsummary
属性を指定することは許容されるが、推奨されない。
以下は、テーブルを使ってコンテンツを3段組にする単純な例である。左側にナビゲーション・バー、中央にメインのコンテンツ、右側に追加のサイドバーが配置されている。ページの上部にはページのタイトルが表示されている。この例では、ページのタイトルを<th>
を使ってマークアップし、この表がレイアウトテーブルであることを示すsummary
属性が指定されている。
コード例:
<table summary="レイアウトテーブルです。">
<tr>
<th colspan="3">ページのタイトル</th>
</tr>
<tr>
<td><div>ナビゲーション・コンテンツ</div></td>
<td><div>メイン・コンテンツ</div></td>
<td><div>右側のサイドバー・コンテンツ</div></td>
</tr>
<tr>
<td colspan="3">フッター</td>
</tr>
</table>
この不適合事例に関するリソースは、今のところない。
HTML又はXHTMLのソースコードに、table
要素があることを確認する。
そのコンテンツ中で、視覚的レイアウトのみの目的でテーブルが用いられている場合
そのtable
要素には、th
要素が含まれていない。
そのtable
要素に対して、値が空ではないsummary
属性が指定されていない。
そのtable
要素にはcaption
要素が含まれていない。
2.のいずれかを満たしていない場合、不適合条件が適用され、そのコンテンツは達成基準に不適合となる。
日本語訳における注記:
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。