行見出しと列見出しを正しく設定する

実際のデータには通常、上部と側面に見出しがあります。各データセルは列見出しと行見出しが交差する位置にあります。

値 92 だけでは意味がほとんどありません。Ada と Score に関連付けると、Ada、Score、92 になります。この組み合わせが構築する関連付けです。

最初の行には scope=col の見出しを置きます。ユーザーが列を下へ移動すると、スクリーンリーダーは文脈としてその列見出しを読み上げ続けます。

各データ行の最初のセルを scope=row の見出しにします。行の名前を示すため、ユーザーが横に読み進めると、値に誰のものか、いつのものかという情報が加わります。

左上のセルは、行見出しの上、列見出しの横に位置することがよくあります。空のth のままにしても問題なく、グリッドの構造を正しく保てます。

ブラウザーは scope を推測しようとしますが、最も単純なグリッド以外では信頼できません。確実にするため、必ず自分で scope を設定してください。

見出し行を thead で、データ行を tbody で囲みます。支援技術に構造が伝わり、マークアップもはるかに読みやすくなります。

データセルに移動すると、ユーザーは行見出し、列見出し、値の順に聞きます。適切な scope が、この通知を正確にします。

th には、列見出しか行見出しのどちらか1つの役割だけを持たせます。1つのセルにデータとラベルを混在させると、誰にとっても関連付けが不明確になります。

データセルを1つランダムに選び、見出しだけで内容を十分に説明できるか確認してください。見出しから数字の意味がわからないなら、scope が間違っています。

上部に列見出し、左側に行見出し、中央にデータを置きます。このマトリックス型が、作成するテーブルの大部分を占めます。

列見出しには scope=col、行見出しには scope=row を使い、各データセルは両者の交差位置に置きます。scope は自分で設定し、推測を決して信頼しないでください。