表題がキャプションになっていない表

ネットショップの配送料金のページに、表が二つあります。一つは太字の表題「通常配送」の下に、もう一つは「速達」の下にあります。どちらも「重さ」と「料金」の同じ列を持ち、違うのは料金だけです。目で見る人は、表題を見ればどちらの表か分かります。スクリーンリーダー利用者がNVDAやJAWSのTキーで次の表へ移動すると、一つ目の表で「表、2列、3行」などと聞こえ、二つ目でも同じように聞こえます。「$9」が通常配送と速達のどちらの料金かを知るには、表を出て、ページを上の行まで読み戻す必要があります。

表題は見た目では表に属していますが、コードでは表の前にたまたま置かれた段落です。二つを結び付けるものがないため、表にはアクセシブルな名前がありません。表題を表の中に入れ、すべての列にまたがる一つのセルの最初の行にするサイトもあります。これも同じです。表には名前がなく、表題はデータのセルとして読まれ、行が一つ多く数えられます。WCAG 1.3.1「情報及び関係性」は、画面で示した関係をコードでも伝えることを求めています。表の表題には、HTMLでは caption 要素を使います。WCAGの達成方法H39がまさにこの用途に挙げている要素です。aria-labelledby でも、ARIAで同じ結び付けができます。

表のすぐ上の本物の見出しは、より軽いケースです。見出しはページの見出し構造に含まれ、ページを順に読む人には表の直前に聞こえます。それでも表ごとの移動では飛ばされるため、表とも結び付けてください。

ページが長いほど影響は大きくなります。表が二つの配送ページなら、少し読み戻すだけで済みます。成績表、曜日ごとに分かれた時刻表、地域ごとに表がある料金ページでは、目的の表を探すために一つずつ中を読む必要があり、推測で選ぶと別の表の数字を読み取ってしまいます。

10グループ中1グループに影響

• 全盲 （影響あり）
• 弱視 （影響なし）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響なし）
• 届く範囲・力 （影響なし）
• 認知 （影響なし）
• 光過敏 （影響なし）

• 視覚を使わない スクリーンリーダーで表へ直接移動したり、ページの表を一覧にしたりすると、「表」と行数・列数しか伝わりません。どの料金を聞いているのか知るには、表の中を読み進めるか、ページを上へ読み戻す必要があります。

表の上の段落は、どの自動チェックも合格にします。段落が表題だと示すものがないためです。axeには、表全体にまたがる一つのセルの最初の行を見つける table-fake-caption というルールがありますが、試験的なルールのため通常の実行には含まれず、この診断でも人が確認する候補として報告します。段落の場合も、この診断は確認候補を出します。名前のないデータ表について、すぐ上にある短い行を表題の候補として引用します。表の上の行がその表の表題か、各表の名前で表を区別できるかは、人が見て判断する必要があります。AIによるコード生成では、デザインどおりに表題を見出しやスタイルを付けた div として表の上に書き、caption を付けないことがよくあります。