3 x 3より大きいテーブル内の空でないすべての<td>要素には、関連付けられたテーブルヘッダーが必要です。

ルールID: td-has-header
ルールセット: axe-core 4.10
ユーザーへの影響: 緊急
ガイドライン: WCAG 2.1 Experimental, WCAG 2.0 Experimental, Section 508, Trusted Tester, EN 301 549
 

Accessibility testing for dev teams - No experience required

Find and fix up to 80% of accessibility issues with axe DevTools Pro. Get started with your free trial today. No credit card needed.

Compliance Data & Impact

User Impact

緊急
Minor
Critical

Disabilities Affected

  • 視覚障害
  • 視聴覚障害

Standard(s)

  • WCAG 2.1 Experimental
  • WCAG 2.0 Experimental
  • Section 508
  • Trusted Tester
  • EN 301 549

WCAG 達成基準 [WCAG 2.1 Experimental]

  • 1.3.1: 必須: Info and Relationships

WCAG 達成基準 [WCAG 2.0 Experimental]

  • 1.3.1: 必須: Info and Relationships

Section 508 ガイドライン

  • 1194.22: 必須: Web based intranet and Internet Information & Applications
  • 1194.22 (g): 必須: Row and column headers shall be identified for data tables.” and “(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

Trusted Tester Guidelines

  • 14.B: 必須: All data cells are programmatically associated with relevant headers.

    修正方法

    問題を修正するには、大きなテーブルの空ではないセルそれぞれに一つかそれ以上のテーブルヘッダーが存在するようにします。スクリーン・リーダーのユーザーがテーブル形式のデータを理解できるようにするには、テーブル内のすべてのデータセル (td) にテーブルヘッダーを持たせる必要があります。

    注記: テーブルは横に三つかそれ以上のセル、縦に三つかそれ以上のセルがある場合、大きいとみなされます。

    例: <th scope="col"><th scope="row"> を使用したシンプルなデータテーブル

    テーブルのセルをヘッダーセルとしてマークアップするには、<td><th> に変更します。そうすると、この例では、テーブルの一番上の行のテキストが太字で中央揃えになることがわかります。

    Greensprings Running Club Personal Bests
    Name 1 mile 5 km 10 km
    Mary 8:32 28:04 1:01:16
    Betsy 7:43 26:47 55:38
    Matt 7:55 27:29 57:04
    Todd 7:01 24:21 50:35

    HTML コード

    <table class="data">
    <caption>
    Greensprings Running Club Personal Bests
    </caption>
      <thead>
        <tr>
         <th scope="col">Name</th>
          <th scope="col">1 mile</th>
          <th scope="col">5 km</th>
          <th scope="col">10 km</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Mary</th>
          <td>8:32</td>
          <td>28:04</td>
          <td>1:01:16</td>
        </tr>
        <tr>
          <th scope="row">Betsy</th>
          <td>7:43</td>
          <td>26:47</td>
          <td>55:38</td>
        </tr>
        <tr>
          <th scope="row">Matt</th>
          <td>7:55</td>
          <td>27:29</td>
          <td>57:04</td>
        </tr>
        <tr>
          <th scope="row">Todd</th>
          <td>7:01</td>
          <td>24:21</td>
          <td>50:35</td>
        </tr>
      </tbody>
    </table>

    注記: テーブルのボーダー、マージン、背景などの視覚的な部分は CSS を用いて定義できます。

    例: id + headers を用いた複雑なテーブル

    複雑なテーブルには id + headers を用いたヘッダーセルとデータセルを関連付ける方法が役に立ちます。この方法では各セルの行と列を識別できるようすべてのセルをマークアップする必要があるため、時間がかかります。

    可能な場合、複雑なテーブルを複数のシンプルなテーブルに分割できるような方法で表現されているデータを計画することがより簡単な選択肢です。これらのテーブルは一般的なユーザーにとってもより使いやすい可能性があります。

    以下の例では、ヘッダーの scope 属性が id 属性に置き換えられています。すべてのデータセルには headers 属性が付与されています。headers 属性には、関連する headers ごとに、それぞれスペースで区切られた id 値のリストを指定できます。例えば、2行目の二つ目のセルは "mary 1m" という headers 値を持っていて、"mary" という行ヘッダーセルと、"1m" という列ヘッダーセルの二つのヘッダーに関連づいていることを伝えています。

    例 2 (列グループのヘッダー):
      Females Males
    Mary Betsy Matt Todd
    1 mile 8:32 7:43 7:55 7:01
    5 km 28:04 26:47 27:29 24:21
    10 km 1:01:16 55:38 57:04 50:35

    HTML コード

    <table class="data complex" border="1">
    <caption>
    Example 2 (column group headers): 
    </caption>
    <tr>
    <td rowspan="2"><span class="offscreen">empty</span></td>
    <th colspan="2" id="females2">Females</th>
    <th colspan="2" id="males2">Males</th>
    </tr>
    <tr>
    <th width="40" id="mary2">Mary</th>
    <th width="35" id="betsy2">Betsy</th>
    <th width="42" id="matt2">Matt</th>
    <th width="42" id="todd2">Todd</th>
    </tr>
    <tr>
    <th width="39" id="mile1_2">1 mile</th>
    <td headers="females2 mary2 mile1_2">8:32</td>
    <td headers="females2 betsy2 mile1_2">7:43</td>
    <td headers="males2 matt2 mile1_2">7:55</td>
    <td headers="males2 todd2 mile1_2">7:01</td>
    </tr>
    <tr>
    <th id="km5_2">5 km</th>
    <td headers="females2 mary2 km5_2">28:04</td>
    <td headers="females2 betsy2 km5_2">26:47</td>
    <td headers="males2 matt2 km5_2">27:29</td>
    <td headers="males2 todd2 km5_2">24:21</td>
    </tr>
    <tr>
    <th id="km10_2">10 km</th>
    <td headers="females2 mary2 km10_2">1:01:16</td>
    <td headers="females2 betsy2 km10_2">55:38</td>
    <td headers="males2 matt2 km10_2">57:04</td>
    <td headers="males2 todd2 km10_2">50:35</td>
    </tr>gt;

    この方法はデータセルとヘッダーセルの間に明確な関連付けを作成します。手作業でマークアップするのは時間がかかりますが、この方法でデータベースからのデータテーブルをサーバーサイドスクリプト言語 (PHP、.net、JSP、Python など) でプログラムするのは比較的簡単です。

    注意: VoiceOver の古いバージョンは id + headers の方法をサポートしていませんでした

    Mac OSX 10.10.2 までは、VoiceOver は id + headers の方法でテーブルヘッダーを読み上げる機能をサポートしていませんでした。一部のバージョンでは、データセルに対して誤ったヘッダーを読み上げることもありました。幸いなことに、現在の VoiceOver はデータとヘッダーの関係性を正しく読み上げます。

    なぜ重要なのか

    スクリーン・リーダーはテーブルを特定の方法で読み上げます。テーブルが正確にマークアップされていない場合、混乱させるような、あるいは不正確なスクリーン・リーダーの読み上げ内容になる可能性があります。

    テーブルのマークアップがセマンティックではなく、ヘッダーの構造が正しくない場合、スクリーン・リーダーのユーザーはセルとそれらのコンテンツの関係性を正しく把握することができません。

    ルールの説明

    データテーブルのマークアップは長く複雑になりやすいです。テーブルは正しい見出し構造で、セマンティックにマークアップされなければなりません。スクリーン・リーダーにはテーブル移動を楽にする機能がありますが、これらの機能が正しく動作するには、テーブルは正しくマークアップされていなければなりません。

    仕組みについて (簡単に言うと)

    データテーブルがセマンティックにマークアップされていて、正しいヘッダー構造であることを確認します。

    リソース

    axe 4.10 ルールの一覧 を参照する

    この情報は役に立ちましたか?

    すでにフィードバックをいただきました、ありがとうございます。.

    あなたの回答は次のとおりです。

    この情報は役に立ちましたか?
    フィードバックが提出された日付/時刻: