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

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

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

Start learning today

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

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 ルールの一覧を参照する

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

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

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

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

翻訳フィードバック

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

Need accessibility training?