すべての<th>要素およびrole="columnheader"またはrole="rowheader"を持つ要素には、それらが記述するデータセルが必要です

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

深刻
▼
Minor
Critical

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 Guidelines

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

    修正方法

    データテーブルの各テーブルヘッダーがデータセルを参照し、各ヘッダーセルが実際に何かに対するヘッダーとして使用されるようにします。

    言い換えると、th 要素には関連したデータセルがなければなりません。

    もし header 属性が存在する場合は、スクリーン・リーダーに利用可能なテキストが存在する要素を参照していることを確認します。

    • th 要素は headers 属性を使用してはならない
    • th 要素はヘッダーが1行かつ1列の場合にのみ使用されるべきである
    • th 要素は scope 属性を使用しなければならない

    悪い例: データのない <th>

    次のテーブルでは、'10 km' という値を持った <th> が列のヘッダーとして機能していますが、そのカラムのセルにはデータがありません

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

    なぜ重要なのか

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

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

    ルールの説明

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

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

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

    リソース

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

    GitHub で axe-core に貢献する

    その他のリソース

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

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

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

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

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

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