テーブル

テストページに関する注意

このページには、テストおよびデモのために意図的にアクセシビリティ上の問題を含む実装例が含まれています。

これらの例を本番サイトで使用しないでください。アクセシビリティのガイドラインやベストプラクティスに反します。

このページは Accessibility Visualizer 拡張機能と併用することで、開発者がアクセシビリティの問題を発見・理解するのを支援する目的で作られています。

テーブルは行と列でデータを整理します。支援技術がデータの関係を理解できるよう、適切な構造が必要です。

✅ th 要素と scope 属性を用いた適切な構造。スクリーンリーダーが列・行の関係を認識できます。

Name	Age	City
John	25	New York
Jane	30	London

❌ th を用いず td だけで構成されたテーブル。支援技術がデータの関係を把握できません。

✅ 列見出しに加えて行見出しも備え、複雑なデータ関係を scope 属性で表現しています。

Quarter	Sales	Profit
Q1	$100K	$20K
Q2	$150K	$30K

✅ caption 要素によりテーブルの目的や内容の文脈を提供します。利用者が理解しやすくなります。

Employee Information
Name	Department
Alice	Engineering
Bob	Marketing

✅ scope="rowgroup" の見出し（Cats、English speakers）は、その行グループ内で自分より左の列を除くすべてのセルに適用されます。行見出し（Legs、Tails）が左端ではなく2列目に置かれている点にも注目してください。

ID	Measurement	Average	Maximum
	Cats
93	Legs	3.5	4
10	Tails	1	1
	English speakers
32	Legs	2.67	4
35	Tails	0.33	1

この表は WHATWG による HTML Standard から引用したもので、CC BY 4.0 のもとで利用しています。

✅ scope="colgroup" の見出し（Sales）は、その列グループ内のすべてのセルに適用され、複数の列を共通の見出しでまとめます。

✅ 行見出し（Country）が2列目にあり、その左にデータ列（Rank）があります。scope="row" の見出しは右側のセルにのみ適用されるため、Rank 列とは関連付けられません。

Rank	Country	Capital
1	Japan	Tokyo
2	France	Paris