データテーブルで見出しセルとデータセルを関連付けるために、scope 属性を使用する

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

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

適用 (対象)

HTML 及び XHTML

これは達成基準 1.3.1: 情報及び関係性 (書かれていない達成方法を満たす手段として十分) に関する達成方法である。

解説

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

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

注記

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

複雑なテーブルについては、H43: データテーブルのデータセルを見出しセルと関連付けるために、id 属性及び headers 属性を使用するの通り、id 属性と headers 属性を利用する。

一つの複雑な表よりも、単純な複数の表を用いて作業するほうが簡単だと思う利用者もいるだろう。制作者は、複雑な表を一つ以上の単純な表に変換できるかどうかを検討したい場合がある。

訳注

WAIC では H63 に関するアクセシビリティ サポーテッド(AS)情報を提供している。2014 年 6 月版のアクセシビリティ サポーテッド(AS)情報: H63 では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。

訳注

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

事例

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

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

 <table border="1">
  <caption>Contact Information</caption>
  <tr>
    <td></td>
    <th scope="col">Name</th>
    <th scope="col">Phone#</th>
    <th scope="col">Fax#</th>
    <th scope="col">City</th>
  </tr><tr>
    <td>1.</td>
    <th scope="row">Joel Garner</th>
    <td>412-212-5421</td>
    <td>412-212-5400</td>
    <td>Pittsburgh</td>
  </tr><tr>
    <td>2.</td>
    <th scope="row">Clive Lloyd</th>
    <td>410-306-1420</td>
    <td>410-306-5400</td>
    <td>Baltimore</td>
  </tr><tr>
    <td>3.</td>
    <th scope="row">Gordon Greenidge</th>
    <td>281-564-6720</td>
    <td>281-511-6600</td>
    <td>Houston</td>
  </tr>
</table> 

参考リソース

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

訳注

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

検証

手順

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

  1. th 要素全てに、scope 属性があることを確認する。
  2. 他の要素の見出しとしての役割を果たす全ての td 要素に、scope 属性があることを確認する。
  3. 全ての scope 属性に、値として row、col、rowgroup、又は colgroup があることを確認する。

期待される結果

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