データ セルまたはヘッダー セルは、データ テーブルにキャプションを付ける目的で使用しないでください。

ルールID: table-fake-caption
ルールセット: axe-core 4.10
ユーザーへの影響:
ガイドライン: WCAG 2.1 Experimental, WCAG 2.0 Experimental, Section 508, EN 301 549
 

Learn Web Accessibility

Subscribe to our extensive curriculum of online self-paced courses

Compliance Data & Impact

User Impact


Minor
Critical

Disabilities Affected

  • 盲目
  • 盲ろう者

Standard(s)

  • WCAG 2.1 Experimental
  • WCAG 2.0 Experimental
  • Section 508
  • 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.

    修正方法

    この問題を解決するには、テーブルがキャプションを視覚的に示すための実際の caption 要素を使用し、 colspan 要素を含むセルを使用しないことを確認します。

    スクリーン リーダーのユーザーが表形式のデータを理解できるようにするには、画面上のタイトルに caption 要素を使用します。

    例: caption 要素を持つシンプルなデータテーブル

    <table class="data">
        <caption>
          Greensprings Running Club Personal Bests
        </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>
    

    なぜ重要なのか

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

    テーブルがキャプションを視覚的に示すための実際のキャプション要素でマークアップされず、代わりにセル上で colspan 要素を使用している場合、スクリーン リーダーのユーザーはテーブルの目的を視覚的に正しく認識できません。

    ルールの説明

    データ テーブルのマークアップは面倒でわかりにくいです。スクリーン リーダーにはテーブル ナビゲーションを容易にする機能がいくつかありますが、これらの機能が正しく動作するにはテーブルを正確にマークアップする必要があります。一部の表では、実際のキャプション要素を使用する代わりに、キャプションを視覚的に示すための特定の colspan 要素を含むセルを使用します。

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

    データ テーブルが、キャプションを視覚的に示すために特定の colspan 要素を使用するテーブル セルでマークアップされていることを確認します。

    リソース

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

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

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

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

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