テストページに関する注意
このページには、テストおよびデモのために意図的にアクセシビリティ上の問題を含む実装例が含まれています。
これらの例を本番サイトで使用しないでください。アクセシビリティのガイドラインやベストプラクティスに反します。
このページは Accessibility Visualizer 拡張機能と併用することで、開発者がアクセシビリティの問題を発見・理解するのを支援する目的で作られています。
テーブル
テーブルは行と列でデータを整理します。支援技術がデータの関係を理解できるよう、適切な構造が必要です。
テーブルの構造
適切なヘッダーを持つテーブル
✅ th 要素と scope 属性を用いた適切な構造。スクリーンリーダーが列・行の関係を認識できます。
| Name | Age | City |
|---|---|---|
| John | 25 | New York |
| Jane | 30 | London |
ヘッダーのないテーブル
❌ th を用いず td だけで構成されたテーブル。支援技術がデータの関係を把握できません。
| Name | Age | City |
| John | 25 | New York |
| Jane | 30 | London |
行見出しのあるテーブル
✅ 列見出しに加えて行見出しも備え、複雑なデータ関係を scope 属性で表現しています。
| Quarter | Sales | Profit |
|---|---|---|
| Q1 | $100K | $20K |
| Q2 | $150K | $30K |
caption のあるテーブル
✅ caption 要素によりテーブルの目的や内容の文脈を提供します。利用者が理解しやすくなります。
| Name | Department |
|---|---|
| Alice | Engineering |
| Bob | Marketing |