WCAG 2.0 実装方法集

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

-

H51: テーブルのマークアップを用いて、表の情報を提示する

適用(対象)

HTML 及び XHTML

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

解説

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

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

事例

事例 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要素を使ってマークアップしている。

判定基準

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

日本語訳における注記:

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