WCAG 2.0 実装方法集

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

-

F46: 達成基準 1.3.1 の不適合事例 - レイアウトテーブルで、th要素、caption要素、又は空ではないsummary属性を用いている

適用(対象)

HTML 及び XHTML

これは次の達成基準に関する不適合事例である:

解説

この不適合事例では、レイアウトだけの目的でテーブルが用いられている際に、th要素、summary属性、またはcaption要素が使用されている場合に発生する不適合について解説する。このような場合、プレゼンテーションを制御するためだけに構造的(又はセマンティックな)マークアップが使われているため不適合となる。HTMLおよびXHTMLのtable要素は、データを表現するためのものである。

レイアウトテーブルの中で用いられることは少ないが、以下の構造的なマークアップもレイアウトテーブル内で用いられると達成基準1.3.1に不適合となる:

支援技術は、HTML及びXHTMLのテーブルに含まれる構造的な情報を用いて、利用者に対してデータを論理的な形で伝えるようになっている。th要素は、行や列の見出しを表すために用いられる。スクリーンリーダーを利用している場合、表の中を移動しながら読む時、移動した先のセルの行や列の見出しを読み上げるためにth要素の内容が利用される。summary属性は、その表の目的や機能についてのテキストによる説明を提供するために用いられ、利用者はスクリーンリーダーを用いてこの情報を得ることができる。caption要素は表の一部であり、その表を特定する役割を持つ。

WCAG 2.0ではレイアウトテーブルの使用を禁じてはいないが、HTMLで定義されているテーブル関聨の要素が持つセマンティックを保持し、プレゼンテーションとコンテンツを分離して記述するコーディング・スタイルを遵守するためにも、CSSによるレイアウトを行うことが推奨される。テーブルレイアウトを行う際には、th要素を用いてはならない。この場合、この表はデータを示しているわけではないから、どのセルも行や列の見出しとしてマークアップする必要はない。同様に、レイアウトテーブルを実現するだけのために用いられている表について、追加の説明を提供する必要はない。summary属性は使用するべきではなく、またsummary属性を使って、たとえば「レイアウトテーブル」のような説明を追加するべきではない。このような情報が記述された場合、スクリーンリーダーを使ってコンテンツを利用している利用者に有用な情報が提供されないだけでなく、ナビゲーションの邪魔になる。レイアウトテーブルに値が空のsummary属性を指定することは許容されるが、推奨されない。

事例

不適合となる事例 1

以下は、テーブルを使ってコンテンツを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>
		

参考リソース

この不適合事例に関するリソースは、今のところない。

検証

チェックポイント

  1. HTML又はXHTMLのソースコードに、table要素があることを確認する。

  2. そのコンテンツ中で、視覚的レイアウトのみの目的でテーブルが用いられている場合

    1. そのtable要素には、th要素が含まれていない。

    2. そのtable要素に対して、値が空ではないsummary属性が指定されていない。

    3. そのtable要素にはcaption要素が含まれていない。

判定基準

日本語訳における注記:

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