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

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

HTML 及び XHTML

これは達成基準 1.3.1: 情報及び関係性 (書かれていない達成方法を満たす慣習的な達成方法) に関する達成方法である。

解説

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

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

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

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

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

訳注:

WAIC では H51 に関するアクセシビリティ・サポーテッド(AS)情報を提供している。2014 年 6 月版の アクセシビリティ・サポーテッド(AS)情報: H51 では、「達成可能」と評価されている。WAIC はこの達成方法が検証した環境で広く動作すると判断している。

訳注:

WAIC では H51 に関するアクセシビリティ・サポーテッド(AS)情報を提供している。2020 年 3 月版の アクセシビリティ サポーテッド(AS)情報: H51 も参照されたい。

事例

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

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

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

 <table>
  <tr>
    <td> </td>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
  </tr>
  <tr>
    <th>8:00-9:00</th>
    <td>Meet with Sam</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th>9:00-10:00</th>
    <td> </td>
    <td> </td>
    <td>Doctor Williams</td>
    <td>Sam again</td>
    <td>Leave for San Antonio</td>
  </tr>
</table> 

参考リソース

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

訳注:

HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。上記はそれぞれ、HTML Standard: 4.9 Tabular dataを代わりに参照できる。

検証

手順

  1. 表形式の情報があることを確認する。
  2. 表形式の情報それぞれについて:

    1. 少なくとも tabletrth、及び td 要素をもつテーブルマークアップが使用されていることを確認する。

期待される結果

  • 上記全ての結果が真である。