WCAG 2.0 実装方法集

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

-

H73: table要素のsummary属性を用いて、データテーブルの概要を提供する

適用(対象)

HTML 4.01及びXHTML 1.x

これは、次の達成基準に関連する実装方法である:

解説

この実装方法の目的は、テーブルにどのようにデータがまとめられているかという短い概略や、テーブルをどのように読み進めるかという短い説明を提供することである。table要素にsummary属性を指定しておくことで、スクリーンリーダーのユーザーがこのような情報を入手できるが、視覚的には表示されない。

summary属性は、テーブルの構造が複雑な場合(たとえば、行ヘッダーや列ヘッダーが複数組み合わせてある場合や、行グループや列グループが複数ある場合)に有用である。また、summary属性は、構造は単純でもたくさんの行や列を含んでいるデータテーブルでも役に立つ。

summary属性は、そのテーブルにcaption要素があるかどうかに関わらず指定できる。両方を用いる場合には、summary属性の内容が単にcaption要素の繰り返しであってはならない。

WCAG 2.0はレイアウトレテーブルの使用を禁止していないが、CSSベースのレイアウトを推奨している。HTMLのtable要素に与えられたセマンティックな意義を守り、コンテンツから表現を分離するというコーディング実務に従うためである。レイアウトテーブルを用いる場合には、summary属性は使用しないか、値を空にする。レイアウトテーブルの目的は、コンテンツの配置を制御することのみであって、テーブルそのものはユーザーから見て「透明(不可視)」であるべきである。summary属性がテーブルの存在を示してしまうと、この透明性を「壊して」しまう。なお、レイアウトテーブルに空のsummary属性(summary="")を指定することは許容範囲である。

事例

事例 1:summary属性はあるが、caption要素はないデータテーブル

この事例は、バスの時刻表を表している。summary属性には、運行系統と目的地、時刻表の利用方法が記述されている。

コード例:

<table summary="7系統、市街地行きの時刻表です。朝4時に運行開始、
深夜に終了します。経由地は先頭の行に示してあります。
出発地や目的地に最も近い経由地を見つけ、その列を下のほうに読み進めて、
バスの出発時刻を見つけてください。">
  <tr>
    <th scope="col">一番街</th>
    <th scope="col">六番街</th>
    <th scope="col">十五番街</th>
    <th scope="col">十五番街モリソン通り</th>
  </tr>
  <tr>
    <td>4:00</td>
    <td>4:05</td>
    <td>4:11</td>
    <td>4:19</td>
  </tr>
  …
</table>  

事例 2:summary属性とcaption要素の両方があるデータテーブル

この事例では、summary属性とcaption要素の両方を用いている。caption要素ではバスの運行系統を特定している。summary属性には、全盲のユーザーが時刻表の利用方法を理解するのに役立つ内容を記述している。スクリーンリーダーは、まずcaption要素を、続いてsummary属性を読み上げる。

コード例:

<table summary="経由地は1行目に示してあります。
出発地や目的地に最も近い経由地を見つけ、その列を下のほうに読み進めて、
バスの出発時刻を見つけてください。
朝4時に運行開始、深夜に終了します。">
  <caption>7系統、市街地行き(平日)</caption>
…
</table>

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. レイアウトテーブルかどうかの確認:セルのコンテンツが同じ行や列に含まれる他のセルのコンテンツと関係があるかどうか判断する。

    1. 関係がない場合、そのテーブルはレイアウトテーブルである。

    2. 関係がある場合、そのテーブルはデータテーブルである。

  2. そのテーブルがレイアウトテーブルである場合、summary属性を指定していないか、値が空である。

  3. そのテーブルがデータテーブルである場合、summary属性を指定している場合は、そのsummary属性によってテーブルの構成や利用方法を説明している。

  4. データテーブルにsummary属性とcaption要素の両方を指定している場合、summary属性の内容が単にcaption要素の繰り返しになっていない。

判定基準

注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。

日本語訳における注記:

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