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

適用 (対象)

HTML 及び XHTML

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

解説

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

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

• td 要素でマークアップしてあるデータセルが、行見出し又は列見出しとしても機能する場合。
• th 要素ではなく td 要素でマークアップしてある見出しセルがある場合、コンテンツ制作者は、CSS でコントロールする方法があるがそれを採用せず、th 要素の表示特性を避けるために td 要素でマークアップすることがある。

事例

 <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 Table Cells: scope attribute
• HTML 4.01 Table cells: The TH and TD elements
• Assistive technology reading tables

関連する達成方法

• H43: データテーブルのデータセルを見出しセルと関連付けるために、id 属性及び headers 属性を使用する
• H51: 表形式の情報を提示するために、テーブルのマークアップを使用する

検証