【実務・中級編】th要素のscope属性によるアクセシビリティ – HTML実践ガイド

テーブルの「アクセシビリティ」を極める：`scope`属性という小さな心遣い

フロントエンドの現場で「テーブル」を実装する際、`

`タグを組んで終わり、にしていませんか？

正直に言えば、CSSでレイアウトを整えて見た目を綺麗にするのは簡単です。しかし、スクリーンリーダー（音声読み上げソフト）を使っているユーザーにとって、構造化されていないテーブルは「情報の迷宮」に過ぎません。

今回は、中級エンジニアなら絶対に押さえておきたい、`th`要素の`scope`属性について深掘りします。これを知るだけで、あなたの書くマークアップの解像度が一段と上がります。

—

なぜ `scope` 属性が必要なのか

結論から言うと、「見出し（th）」と「データ（td）」の親子関係を、ブラウザと支援技術に対して明確に定義するためです。

ブラウザのレンダリングエンジンは、デフォルトで隣接するセルとの関係を推測します。しかし、複雑なテーブル構造――例えば、見出しが2行になったり、行と列の両方にヘッダーが必要なケース――では、推測が外れることが多々あります。

`scope`属性を付与することは、ブラウザに対して「この見出しは、この範囲を司る責任者です」と宣言するようなものです。これがあるだけで、スクリーンリーダーは「このデータは、どのカテゴリー（見出し）に属しているか」を正確にユーザーへ伝えてくれるようになります。

`scope` で指定できる4つの値

使い方は非常にシンプルです。以下の4つを状況に応じて使い分けます。

`col`: その列（カラム）全体の見出しであることを示す。
`row`: その行（ロウ）全体の見出しであることを示す。
`colgroup`: 複数列からなるグループの見出しであることを示す。
`rowgroup`: 複数行からなるグループの見出しであることを示す。

基本的には、縦並びのヘッダーなら `col`、横並びのヘッダーなら `row` を使うのが9割です。

—

実践：コピペで使える「アクセシブルなテーブル」の雛形

以下は、実務でも非常によくある「行方向と列方向の両方にヘッダーを持つテーブル」のコードです。構造を意識して読み解いてください。

プロジェクト名	進捗状況	担当者
次世代UI開発	進行中	佐藤
リファクタリング計画	完了	鈴木

ブラウザの裏側で起きていること

少し技術的な話をしましょう。ブラウザはDOMをパースする際、`scope`属性が設定されていると、その内部で「アクセシビリティツリー」を構築します。

`scope=”row”` がある場合、ブラウザの支援技術向けインターフェースは、「この `td` 要素は、同じ行にある `th` 要素と紐付いている」という関係性を内部的にキャッシュします。これがないと、スクリーンリーダーは「この値は、どのヘッダーと対になっているのか？」を解析するために、DOMツリーを都度スキャンして計算する必要があり、パフォーマンスの低下や誤読のリスクを招くのです。

シニアからのアドバイス：現場で迷ったら

現場で「これは `col` かな？ `row` かな？」と迷ったときは、「そのテーブルを読み上げるユーザーが、どの単語を『見出し』として認識したいか」を想像してください。

一番上の行を読み上げたら、その列の内容が理解できるか？ → `scope=”col”`
一番左の列を読み上げたら、その行の内容が理解できるか？ → `scope=”row”`

シンプルですが、この視点を持つだけで、あなたのコードは「ただのタグの集合体」から「誰にとっても意味のある構造体」へと進化します。

まとめ

`scope`属性は、見出しとデータの関係を「確定」させる魔法の杖。
`col` と `row` を使い分けるだけで、アクセシビリティスコアは劇的に改善する。
アクセシブルなテーブルは、結果としてSEOや保守性にも良い影響を与える。

アクセシビリティ対応は「あとからやろう」と思うと非常に重い作業ですが、最初からマークアップに組み込んでしまえば、たった一行の属性追加で済みます。こういった「プロの矜持」を日々のコードに忍ばせられるエンジニアこそ、チームで最も信頼される存在になるはずですよ。