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

適用 (対象)

HTML 及び XHTML

これは達成基準 1.3.1: 情報及び関係性 (失敗) に関する達成方法である。

解説

この達成方法の目的は、レイアウトにのみ使用されるテーブルに th 要素、summary 属性、又は caption 要素が含まれる場合に発生する失敗について記述することである。これは、構造化 (又はセマンティック) マークアップを提示だけのために使用するため、失敗例である。HTML 及び XHTML の table 要素の目的は、データを提示することである。

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

• headers 属性
• scope 属性

支援技術は、HTML 又は XHTML のテーブルに含まれる構造を用いて、利用者に対してデータを論理的な形で伝える。th 要素は、行及び列の見出しをマークすすために用いられる。スクリーンリーダーは、利用者が表をナビゲートすると、変化する見出し情報を読み上げるために th 要素の情報を利用する。table 要素の summary 属性は、その表の目的及び機能についてのテキストによる説明を提供する。支援技術は、summary 属性の情報を利用者が利用できるようにする。caption 要素は表の一部であり、その表を特定する役割を持つ。

WCAG 2 はレイアウトテーブルの使用を禁止していないが、HTML のテーブル関連要素の定義されたセマンティックな意味を保持し、コンテンツから提示を分離するコーディングの慣習に従うためにも、CSS ベースのレイアウトが推奨される。テーブルがレイアウトの目的で使用されるとき、th 要素を使用すべきではない。そのテーブルはデータを示していないため、どのセルも行又は列の見出しとしてマークアップする必要はない。同様に、コンテンツをレイアウトするためにのみ用いられているテーブルについて、追加の説明を提供する必要はない。summary 属性を含めない。そして、テーブルを「レイアウトテーブル」のような説明をするために summary 属性を使用しない。音声の場合、この情報は価値を提供せず、スクリーンリーダーを通してコンテンツをナビゲートする利用者の気を散らすだけである。空の summary 属性はレイアウトテーブルで許容されるが、推奨されない。

事例

 <table summary="layout table">
 <tr>
   <th colspan=3>Page Title</th>
 </tr>
 <tr>
   <td><div>navigation content</div></td>
   <td><div>main content</div></td>
   <td><div>right sidebar content</div></td>
 </tr>
 <tr>
   <td colspan=3>footer</td>
 </tr>
 </table>

関連する達成方法

• H39: データテーブルのキャプションとデータテーブルを関連付けるために、caption 要素を使用する
• H51: 表形式の情報を提示するために、テーブルのマークアップを使用する
• H73: データテーブルの概要を提供するために、table 要素の summary 属性を使用する

検証