空でない <td> 大きな <table> 要素には、関連するテーブル ヘッダーが必要です

ルール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 指南

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

    修正方法

    この問題を解決するには、大きなテーブル内の空でない各データ セルに1つ以上のテーブル ヘッダーがあることを確認してください。スクリーン リーダーのユーザーが表形式のデータを理解できるようにするには、すべての表データ セル (td) に表ヘッダーが必要です。

    注: テーブルの幅と高さが3セル以上ある場合、そのテーブルは大きいとみなされます。

    例:シンプルなデータテーブルと <th scope="col"><th scope="row">

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

    グリーンスプリングスランニングクラブの自己ベスト
    名前 1マイル 5キロメートル 10キロメートル
    メアリー 8:32 28:04 1:01:16
    ベッツィ 7:43 26:47 55:38
    マット 7:55 27:29 57:04
    トッド 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 メソッドが役立ちます。この方法は、すべてのセルに各セルの行と列の ID をマークアップする必要があるため、時間がかかります。

    可能であれば、複雑な表を一連のより単純な表に分割できるようにデータの表示を計画すると、より簡単なオプションになる場合があります。これらの表は、一般のユーザーにとっても役立つかもしれません。

    次の例では、ヘッダーの scope 属性が id 属性に置き換えられています。すべてのデータセルには headers 属性が含まれています。headers 属性は、関連する id ごとに、それぞれをスペースで区切った headers値のリストを取ることができます。たとえば、2行目の2番目のセルの値は headers 「mary 1m」で、このセルが2つのヘッダー(「mary」の行ヘッダー セルと「1m」の列ヘッダー セル)に関連付けられていることを示します。

    例2 (列グループ ヘッダー):
      女性 男性
    メアリー ベッツィ マット トッド
    1マイル 8:32 7:43 7:55 7:01
    5km 28:04 26:47 27:29 24:21
    10キロメートル 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など) を使用してプログラムするのは比較的簡単です。

    注: 対象のスクリーンリーダーとブラウザで id + headers メソッドの問題を確認してください。

    一部のスクリーン リーダーとブラウザーの組み合わせでは、id + headersメソッドを使用してテーブル ヘッダーを読み取る機能に問題があります。一部のバージョンでは、データセルとヘッダーの関連付けを間違って読み取ることさえあります。対象のスクリーン リーダーとブラウザーの組み合わせの互換性を必ず確認してください。

    なぜ重要なのか

    スクリーン リーダーには、テーブルを読み上げるための特別な方法があります。テーブルが適切にマークアップされていない場合、スクリーン リーダーの出力が混乱したり不正確になったりする可能性があります。

    テーブルが意味的にマークアップされておらず、正しいヘッダー構造がない場合、スクリーン リーダーのユーザーはセルとその内容の関係を視覚的に正しく認識できません。

    ルールの説明

    データ テーブルのマークアップは面倒でわかりにくいです。テーブルは、意味的に正しいヘッダー構造でマークアップされる必要があります。スクリーン リーダーにはテーブル ナビゲーションを容易にする機能がありますが、これらの機能が正しく動作するにはテーブルを正確にマークアップする必要があります。

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

    データ テーブルが意味的にマークアップされ、正しいヘッダー構造を持っていることを確認します。

    リソース

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

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

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

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

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