面倒な複雑なテーブル: データ テーブルのヘッダー セルと集計行

上部に列ヘッダーが 1 行ある単純なデータ テーブルは、比較的簡単にアクセスできます。本当の苦痛は、列と行の両方にヘッダーがあるテーブル、結合されたセル、または集計行など、複雑なテーブルから始まります。この記事では、スクリーン リーダーがコンテキストを失うことなくセルごとにどのヘッダーが適用されるかを「理解」できるように、表のヘッダーにタグを付ける方法について説明します。

TH が TD と異なる理由

HTML テーブルまたはタグ付き PDF では、すべてのセルに、TH (テーブル ヘッダー) または TD (テーブル データ - 通常のデータ セル) の 2 つの役割タイプのいずれかがあります。違いは必ずしも視覚的なものではありません。ヘッダー セルとデータ セルは同じスタイルに見える可能性があります。それは意味論的なものです。TH はスクリーン リーダーに「これは、その下または横にあるデータの意味を説明するヘッダーです」と伝えます。正しくタグ付けしないと、スクリーン リーダーはすべてのセルが等しいかのようにテーブルを 1 行ずつ移動することになり、どのデータがどのカテゴリに属しているかを完全に見失ってしまいます。

スコープが十分な場合と、さらに必要な場合

ほとんどのテーブルでは、スコープ属性を付けて、それが列ヘッダーであるかどうかを示します (scope="col") または行ヘッダー (scope="row")。スクリーン リーダーがデータ セルに到達すると、関連する列ヘッダーと行ヘッダーの両方が自動的に読み上げられます。そのため、ユーザーには、たとえば、単独の「1,200」ではなく、「1,200 — Sales, Q1」のように聞こえます。

3 レベルを超えるヘッダー (たとえば、複数のサブ列をグループ化するスーパーヘッダー) がある特に複雑なテーブルの場合、スコープだけでは常に十分とは限りません。そのような場合は、属性 id と headers のペアを使用します。すべてのヘッダー セルに一意の ID を与え、すべてのデータ セル リストの headers 属性に、それに関連するすべてのヘッダー ID を与えます。この方法はより柔軟ですが、より複雑でエラーが発生しやすいため、本当に必要な場合に備えてください。

概要行と複数のヘッダー

テーブルの下部にある集計行 (「Total」、「Average」) は、それ自体一種のヘッダーです。通常、合計セル自体にscope="row" を指定して TH としてタグ付けするのが適切です。そのため、スクリーン リーダーはそれを通常のデータ行と区別します。同様に、複数の列をグループ化するスーパーヘッダーを持つテーブル (たとえば、「第 1 四半期」、「第 2 四半期」にまたがる「2026 売上高」) では、colspan属性とスコープを組み合わせて使用するため、読み上げ時にも階層グループが維持されます。

Word と PDF で実際にどのように見えるか

Word では、標準の「挿入 ▸ 表」ツールを使用し、表のデザインで「ヘッダー行」をチェックすると、正しい基盤が作成され、ほとんどの場合、自動的に TH として PDF にエクスポートされます。 Acrobat では、Word からエクスポートしてアクセシビリティ チェックを実行した後、タグ ツリーを開いて、ヘッダー セルが通常の TD ではなく実際に TH としてマークされていることを確認する価値があります。これは、見落としがちなよくあるエクスポートの間違いです。