WCAG 2.0 実装方法集

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

-

H63: scope属性を用いて、データテーブルの見出しセルとデータセルを関連付ける

適用(対象)

HTML 及び XHTML

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

ユーザーエージェント及び支援技術によるサポート

JAWSの最新版では、scope属性のrowcolという値をほとんどサポートしているが、まだいくつかの問題がある。Window-Eyesはscope属性のサポートが一貫していない。これらのスクリーンリーダーの日本語版も同じである。JAWSのバージョン5以前、Window-Eyesの古いバージョンではscope属性のサポートが一貫していない。

現時点で、見出しが1行目や1列目にないテーブルについて、さまざまな支援技術で一貫したサポートを確保したい場合は、H43: Using id and headers attributes to associate data cells with header cells in data tablesにある複雑なテーブルに関する実装方法を採用してもよい。一方、見出しが1行目や1列目にある単純なテーブルについては、th要素とtd要素の利用を推奨する。

解説

この実装方法の目的は、scope属性を利用して見出しセルとデータセルを関連付けることである。scope属性を利用するのは、見出しとして利用するあらゆるセルが及ぶ範囲を明確にするためである。範囲とは、そのセルが行、列、行グループ、列グループのどの見出しであるかを特定するものである。rowcolrowgroupcolgroupという値によって範囲を特定することになる。

事例 1のように、見出しが1行目や1列目にない単純なテーブルに対してこの実装方法が利用できる。今日のスクリーンリーダーのサポートを考えると、単純なテーブルについて次の2つの状況が当てはまる場合に、この実装方法の利用が示唆される:

注記: 1行目や1列目に見出しがある単純なテーブルについては、scope属性を指定せずにth要素を利用するだけで十分である。

注記: 複雑なテーブルについては、H43: Using id and headers attributes to associate data cells with header cells in data tables の通り、id属性とheaders属性を利用する。

事例

事例 1:単純なスケジュール表

次のコード例では、1列目にテーブルの行番号を示す連番が含まれている。行の中でも重要な値は2列目に含まれるため、各セルにscope="row"と指定してある。1行目のセルはtd要素でマークアップし、これらにもscope="col"と指定してある。

コード例:

 <table border="1">
  <caption>連絡先</caption>
  <tr>
    <td></td>
    <td scope="col">名前</td>
    <td scope="col">電話番号</td>
    <td scope="col">ファックス番号</td>
    <td scope="col">市名</td>
  </tr><tr>
    <td>1.</td>
    <td scope="row">ジョエル・ガーナー</td>
    <td>412-212-5421</td>
    <td>412-212-5400</td>
    <td>ピッツバーグ</td>
  </tr><tr>
    <td>2.</td>
    <td scope="row">クライブ・ロイド</td>
    <td>410-306-1420</td>
    <td>410-306-5400</td>
    <td>ボルティモア</td>
  </tr><tr>
    <td>3.</td>
    <td scope="row">ゴードン・グリニッジ</td>
    <td>281-564-6720</td>
    <td>281-511-6600</td>
    <td>ヒューストン</td>
  </tr>
</table> 

参考リソース

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

検証

チェックポイント

各データテーブルについて:

  1. th要素全てに、scope属性が指定されている。

  2. 他の要素の見出しとしての役割を果たす全てのtd要素に、scope属性が指定されている。

  3. 全てのscope属性に、値としてrowcolrowgroupcolgroupが指定されている。

判定基準

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

日本語訳における注記:

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