0Pricing
HTML Academy · レッスン

テーブルのアクセシビリティ：scope、summary、caption

スクリーンリーダーをサポートするため、captionとscope属性を追加します。

「テーブルのアクセシビリティ：scope、summary、caption」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

テーブルのアクセシビリティが重要な理由

スクリーンリーダーのユーザーはデータテーブルをセル単位で移動するため、読み上げるすべてのデータセルに見出しの文脈が必要です。

  • 適切なマークアップがないと、スクリーンリーダーは列や行の文脈なしに値だけを読み上げます
  • アクセシブルなテーブルは、誰にとってもデータを理解しやすくします

caption要素

<caption>はテーブルに表示されるタイトルを提供します：

<table>
  <caption>Q4 2024 Product Sales by Region</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
<!-- caption is the first child of table -->
<!-- Screen readers announce it when entering the table -->
<!-- Helps all users understand the table's purpose at a glance -->

captionのスタイル設定

CSSでcaptionのスタイルと位置を設定します：

caption {
  caption-side: bottom;  /* or top (default) */
  font-style: italic;
  font-size: 0.875rem;
  color: #666;
  text-align: left;
  padding: 0.5rem 0;
}

thのscope属性

scope属性は、見出しがどのセルに適用されるかをスクリーンリーダーに伝えます：

<thead>
  <tr>
    <th scope="col">Name</th>      <!-- header for a column -->
    <th scope="col">Score</th>
    <th scope="col">Grade</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Alice</th>    <!-- header for a row -->
    <td>95</td>
    <td>A</td>
  </tr>
</tbody>

scopeの値

scope属性の値：

  • col — 同じ列のセルに適用される見出し
  • row — 同じ行のセルに適用される見出し
  • colgroup — 列グループのセルに適用される見出し
  • rowgroup — 行グループ（tbody/thead）のセルに適用される見出し

複雑な見出しでのscope

結合した見出しでは、colgroupまたはrowgroupのscopeを使います：

<thead>
  <tr>
    <th rowspan="2" scope="col">Name</th>
    <th colspan="2" scope="colgroup">2024</th>   <!-- colgroup -->
  </tr>
  <tr>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
  </tr>
</thead>

tdのheaders属性

非常に複雑なテーブルでは、headersを使ってセルと見出しを明示的に関連付けます：

<thead>
  <tr>
    <th id="hname">Name</th>
    <th id="hq1">Q1</th>
    <th id="hq2">Q2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="ralice" headers="hname">Alice</th>
    <td headers="hq1 ralice">95</td>
    <td headers="hq2 ralice">88</td>
  </tr>
</tbody>

scopeとheadersの使い分け

ガイドライン：

  • 1行の見出しを持つ単純なテーブル → scope="col"とscope="row"を使います
  • 複雑な結合見出し → ID参照を含むheaders属性を使います
  • WCAG 1.3.1では、テーブルの見出しをデータセルにプログラムで関連付けることが求められています

tableのaria-label

captionを視覚的に表示したくない場合は、aria-labelを使います：

<!-- caption with visually-hidden class -->
<table aria-label="Q4 2024 Product Sales by Region">
  ...
</table>
<!-- Or use aria-labelledby to reference a heading -->
<h2 id="table-title">Sales Data</h2>
<table aria-labelledby="table-title">...</table>

テーブルのアクセシビリティをテストする

テーブルがアクセシブルか確認する方法：

  • スクリーンリーダー（VoiceOver、NVDA）のTablesパネルを使います
  • ブラウザー拡張機能のaxe DevToolsをインストールします
  • ページURLに対してpa11y CLIを実行します
  • W3C Markup Validatorでcaptionの不足を検出できます

summary属性（非推奨）

summary属性は、複雑なテーブルをスクリーンリーダー向けに説明するために使われていましたが、現在のHTML5では非推奨です：

<!-- Old HTML 4.01 — do not use: -->
<table summary="This table shows quarterly sales...">

<!-- Modern HTML5 replacement: -->
<table>
  <caption>This table shows quarterly sales...</caption>
</table>
<!-- Or: aria-describedby to a paragraph -->

アクセシブルなテーブルのチェックリスト

データテーブルのアクセシビリティチェックリスト：

  • <caption>を使ってテーブルにラベルを付けます
  • すべての見出しセルに<th>を使います
  • すべての<th>要素にscopeを追加します
  • 構造化のために<thead>、<tbody>、<tfoot>を使います
  • 複雑なテーブルでは、idとheadersを使います

確認問題

テーブル全体の列の見出しとなるthには、どのscopeの値を使いますか？

振り返り：テーブルのアクセシビリティ

アクセシブルなテーブルの基本：

  • <caption> — スクリーンリーダーが読み上げる、表示用のテーブルタイトル
  • scope="col" — 列見出し
  • scope="row" — 行見出し
  • scope="colgroup/rowgroup" — 結合した見出し
  • idとheaders — 複雑な多階層見出し用
  • axe、pa11y、またはVoiceOverでテストします

よくある質問

「テーブルのアクセシビリティ：scope、summary、caption」レッスンは無料ですか？

はい。「テーブルのアクセシビリティ：scope、summary、caption」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「テーブルのアクセシビリティ：scope、summary、caption」で何を学びますか？

スクリーンリーダーをサポートするため、captionとscope属性を追加します。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「テーブルのアクセシビリティ：scope、summary、caption」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. table、tr、td、th
  2. thead、tbody、tfootの構造
  3. 結合のためのcolspanとrowspan
  4. テーブルのアクセシビリティ：scope、summary、caption
← HTML Academyに戻る