table-fake-caption

表の1行目を本来の<caption>の代用にしないことを推奨します

manualWCAG 1.3.1 (A)確度:low重大度:minorperceivable

<caption>がなく、1行目に空でないセルが1つだけあり、他の行には複数のセルがある表を検出し、そのセルが偽のキャプションとして機能していないかを手動レビューに回します。

適用範囲:<caption>子要素がなく、2行以上あり、1行目に空でないテキストを持つセルがちょうど1つだけあり、かつ他の少なくとも1行に複数のセルがある<table>要素です。次のものは除外します。ロール(role属性のうち実在するロールを指す最初のトークンで、大文字と小文字は区別しません)がtable、grid、treegrid以外の表(キャプションが不要なrole="presentation"のレイアウト用の表など)と、空でないaria-label、テキストに解決されるaria-labelledby、または空でないtitleですでに名前が付いた表です。WCAGはこれらを表のタイトルとして認めています。

期待される結果:明らかに複数の列を持つ行の上で、1行目に1つだけ置かれたセルは、作成者がそれを本来の表のセルとしてではなく、見た目上のキャプションやタイトルとして使っていることを強く示唆します。この位置による慣例だけで伝えられている構造は、本来の<caption>要素のようにはプログラムで表と関連付けられません(1.3.1)。

例

can't tell
<table>
<tr><td>Monthly Sales Report</td></tr>
<tr><td>Jan</td><td>100</td></tr>
<tr><td>Feb</td><td>200</td></tr>
</table>

複数のセルを持つ行の上で、1行目に1つだけのセルが置かれており、本来の<caption>もありません。データセルのふりをしたキャプションのように見えます。

n/a
<table>
<caption>Monthly Sales Report</caption>
<tr><td>Title cell</td></tr>
<tr><td>Jan</td><td>100</td></tr>
</table>

表に本来の<caption>要素があります。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

SINGLE_CELL_FIRST_ROW_NO_CAPTION

  1. レポートに示された表を見つけ、テキストのセルが1つだけある最初の行を確認してください。
  2. そのセルが表全体のタイトルなのか、実際のデータまたは列の見出しなのかを判断してください。
  3. タイトルであれば、開発者ツールのアクセシビリティペインで表に名前があるか確認してください(caption要素から得られる必要があります)。

満たす場合:最初の行のセルは実際の表データか見出しであるか、表のタイトルが表に名前を与えるcaptionにあります。

満たさない場合:表のタイトルが最初の行のセルとして表示されているだけで、captionとして表に結び付けられていないため、WCAG 1.3.1を満たしません。

ソースコードを見る