WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

H51: 表の情報を提示するために、テーブルのマークアップを使用する

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

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

適用(対象)

HTML 及び XHTML

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

解説

この達成方法の目的は、利用者がテーブルを見ることができない場合、又は表現形式が変更された場合でも、含まれる情報の関係を保てる方法で、表の情報を提示することである。情報を表として提示すべきと考えられるのは、テキスト、数値、画像、あるいは他のデータの論理関係が(垂直・水平に)二次元で存在するときである。論理関係は列と行で示され、列と行は論理関係が認識できる状態でなければならない。

table 要素は、子要素trthtd といっしょに用いることで、論理関係を認識可能にする。一方、列を整形するのにタブを入れたり、pre要素を利用するのは、純粋に見た目だけを考えた方法である。利用者がテーブルを見ることができない場合、又は表現形式が変更された場合は、視覚的に暗に示された論理関係は失われてしまう。

単純な表は一般的に列に対して 1 つのレベルの見出し、及び/又は行に対して 1 つのレベルの見出しがある。

通常、単純な表では、1 行目の 1 列目は空白または列全体の内容を 1 列目に記述する。1 行目の 1 列目は空白がなく(つまり、"列見出し"を含む)、列全体の内容を記述しており、読者は列と列の間の異なる意味を区別できる。

1 列目の行は、通常では空白ではなく、行全体の内容を記述した"行見出し"を含んでることが多い。読者は行と行の間の異なる意味を区別できる。その他に、1 列目は単純なデータが含まれる。

事例

事例 1: 列見出しと行見出しが付いた簡単なデータテーブルとしてマークアップしたスケジュール表

この事例では、簡単なデータテーブルに table 要素を利用している。1 行目は曜日、1 列目は時間である。これらのセルは th 要素でマークアップしてあり、列見出しが曜日、行見出しが時間という役割になっている。

スクリーンリーダーは、利用者がテーブルを読み進めるとき、対応する見出し情報の変化を読み上げる。それゆえ、スクリーンリーダーの利用者が同じ行を左右に動くときは、(もしあれば)予定に対応する曜日(列見出し)の読み上げを、同じ列を上下に移動するときは、対応する時間の読み上げを聞くであろう。

コード例:

<table>
  <tr>
    <td> </td>
    <th>月</th>
    <th>火</th>
    <th>水</th>
    <th>木</th>
    <th>金</th>
  </tr>
  <tr>
    <th>8:00から9:00</th>
    <td>サムと会う</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th>9:00から10:00</th>
    <td> </td>
    <td> </td>
    <td>ウィリアムズ先生</td>
    <td>サムとまた会う</td>
    <td>サン・アントニオから出発</td>
  </tr>
</table> 

参考リソース

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

検証

チェックポイント

  1. 表形式の情報がある。

  2. 表形式の情報それぞれについて:

    1. テーブルを、少なくとも tabletrthtd 要素を使ってマークアップしている。

判定基準

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