WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

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

適用(対象)

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 要素が含まれていない。

判定基準