【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
HTML 及び XHTML
これは、次の達成基準に関連する達成方法である:
H63 に関するユーザエージェントサポートノートを参照のこと。
この達成方法の目的は、scope 属性を利用して見出しセルとデータセルを関連付けることである。 scope 属性を利用するのは、見出しとして利用するあらゆるセルが及ぶ範囲を明確にするためである。範囲とは、そのセルが行、列、行グループ、列グループのどの見出しであるかを特定するものである。row、col、rowgroup、colgroup という値によって範囲を特定することになる。
事例 1 のように、見出しが 1 行目や 1 列目にない単純なテーブルに対してこの達成方法が利用できる。今日のスクリーンリーダーのサポートを考えると、単純なテーブルについて次の二つの状況が当てはまる場合に、この達成方法の利用が示唆される:
td 要素でマークアップしてあるデータセルが、行見出し又は列見出しとしても機能する場合
th 要素ではなく td 要素でマークアップしてある見出しセルがある場合、コンテンツ制作者は、CSS でコントロールする方法があるがそれを採用せず、th 要素の表示特性を避けるために td 要素でマークアップすることがある。
注記 1:
1 行目や 1 列目に見出しがある単純なテーブルについては、scope 属性を指定せずに th 要素を利用するだけで十分である。
注記 2:
複雑なテーブルについては、H43: データテーブルのデータセルを見出しセルと関連付けるために、id 属性及び headers 属性を使用するの通り、id 属性と headers 属性を利用する。
注記 3: 一つの複雑な表よりも、単純な複数の表を用いて作業するほうが簡単だと思う利用者もいるだろう。制作者は、複雑な表を一つ以上の単純な表に変換できるかどうかを検討したい場合がある。
訳注: WAIC では H63 に関するアクセシビリティ・サポーテッド（AS）情報を提供している。
2014 年 6 月版のアクセシビリティ・サポーテッド（AS）情報: H63 では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。
訳注: WAIC では H63 に関するアクセシビリティ サポーテッド（AS）情報を提供している。
2020 年 3 月版の アクセシビリティ サポーテッド（AS）情報: H63 も参照されたい。
次のコード例では、1 列目にテーブルの行番号を示す連番が含まれている。行の中でも重要な値は 2 列目に含まれるため、各セルに scope="row" と指定してある。1 行目のセルは 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 Table Cells: scope attribute
HTML 4.01 Table cells: The TH and TD elements
訳注: HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。上記はそれぞれ、HTML 5.2§4.9.10. The th element を代わりに参照できる。
各データテーブルについて:
th 要素全てに、scope 属性があることを確認する。
他の要素の見出しとしての役割を果たす全ての td 要素に、scope 属性があることを確認する。
全ての scope 属性に、値として row、col、rowgroup、又は colgroup があることを確認する。
上記全ての結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。