データテーブル内のテーブルヘッダーはデータセルを参照する必要があります

ルールID: th-has-data-cells
ルールセット: axe-core 4.10
ユーザーへの影響: 深刻
ガイドライン: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), 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

Disabilities Affected

  • 視覚障害
  • 視聴覚障害

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • Section 508
  • Trusted Tester
  • EN 301 549

WCAG 達成基準 [WCAG 2.1 (A)]

  • 1.3.1: Info and Relationships

WCAG 達成基準 [WCAG 2.0 (A)]

  • 1.3.1: Info and Relationships

WCAG 達成基準 [WCAG 2.2 (A)]

  • 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.

    修正方法

    データテーブル内の各テーブルヘッダーがデータセルを参照していることを確認し、使用される各ヘッダーセルが実際に何かのヘッダーであることを確認します。

    つまり、 th 要素には関連付けられたデータセルが必要です。

    header 属性が存在する場合、スクリーンリーダーで使用できるテキストを含む要素を参照していることを確認してください。

    • th 要素は headers 属性を使用してはなりません。
    • th 要素は、ヘッダーが1行1列の場合にのみ使用してください。
    • th 要素は scope 属性を使用してください。

    悪い例: <th> を scope="row" に設定する代わりに scope="col"に設定してください。

    次の表で、 <th> 要素が row に設定されるべきではなく、 col に設定されていることに注意してください。

    テディベアコレクター:
    苗字 名 市
    フェニックス 伊万里 ヘンリー
    ゼキ ローマ ミン
    アピルカ ケリー ブリン 
    <table>
  <caption>Teddy bear collectors:</caption>
 <tr> 
    <th scope="row">Last Name</th>
    <th scope="row">First Name</th>
    <th scope="row">City</th>
  </tr>
  <tr>
    <td>Phoenix</td>
    <td>Imari</td>
    <td>Henry</td>
  </tr>
  <tr>
    <td>Zeki</td>
    <td>Rome</td>
    <td>Min</td>
  </tr>
  <tr>
    <td>Apirka</td>
    <td>Kelly</td>
    <td>Brynn</td>
  </tr>
</table>

    以下は、前の例で列ヘッダーをテーブルコンテンツに関連付けるための修正されたコードです。 

    ...
<th scope="col">Last Name</th>
<th scope="col">First Name</th>
<th scope="col">City</th>
...

    なぜ重要なのか

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

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

    ルールの説明

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

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

    データテーブルのマークアップをチェックし、各ヘッダーセルが列または行のヘッダーとして参照されていることを確認します。

    リソース

    Deque University コースのページ (要登録)

    GitHub で axe-core に貢献する

    その他のリソース

    その他リソースもあわせてご参照ください。

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

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

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

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

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