アクセシビリティを意識した<Table>の作り方 #CSS

概要

HTMLのTABLEタグでテーブルを作るとき、いろんなタグが使うことができる。

<table>からはじまり、<thead>、<tbody>、<tr>、<th>、<rd>など、
Tableを作るのにたくさんタグが使うことができ、複雑でややこしい。

この記事では、テーブルで使うことができるタグの役割の解説、
テーブルができる最小のサンプルとアクセシビリティを意識したサンプルの解説を行います。

TABLEで使えるタグについて

`<table>` : 表要素

テーブル形式のデータを表すフローコンテンツです。

<table>
  <!-- 以下にテーブルの要素が入ります。-->
</table>

`<caption>` : 表キャプション要素

テーブルのキャプション (またはタイトル) を指定する要素です。

<table>
  <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption>
  <!-- 以下にテーブルの要素が入ります。-->
</table>

`<colgroup>` : 列グループ定義要素

テーブル内の列(column)のグループを定義する要素です。
子要素の、<col>のspan属性を指定することで、列をグループ化できます。

<table>
  <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption>
  <colgroup>
    <col span="2"> <!--果物-->
    <col span="2"> <!--野菜-->
  </colgroup>
  <!-- 以下にテーブルの要素が入ります。-->
</table>

`<thead>` : 表ヘッダー要素

テーブルの列の見出しを定義する要素です。

<table>
  <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption>
  <colgroup>
    <col span="2"> <!--果物-->
    <col span="2"> <!--野菜-->
  </colgroup>
  <thead>
    <tr>
      <td> </td>
      <th>りんご</th>
      <th>みかん</th>
      <th>にんじん</th>
      <th>とまと</th>
    </tr>
  </thead>
  <!-- 以下にテーブルの要素が入ります。-->
</table>

`<tbody>` : 表本体要素

テーブルの本体要素で、行要素の<tr>を内包します。

<table>
  <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption>
  <colgroup>
    <col span="2"> <!--果物-->
    <col span="2"> <!--野菜-->
  </colgroup>
  <thead>
    <tr>
      <td> </td>
      <th>りんご</th>
      <th>みかん</th>
      <th>にんじん</th>
      <th>とまと</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>太郎くん</th>
      <td>5個</td>
　　　　　　　　　　　　<td>10個</td>
      <td>3個</td>
　　　　　　　　　　　　<td>2個</td>
    </tr>
    <tr>
      <th>二郎くん</th>
      <td>2個</td>
　　　　　　　　　　　　<td>15個</td>
      <td>2個</td>
　　　　　　　　　　　　<td>4個</td>
    </tr>
  </tbody>
  <!-- 以下にテーブルの要素が入ります。-->
</table>

`<tfoot>` : 表本体要素

テーブル内の列を総括する行を追加する要素です。

<table>
  <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption>
  <colgroup>
    <col span="2"> <!--果物-->
    <col span="2"> <!--野菜-->
  </colgroup>
  <thead>
    <tr>
      <td> </td>
      <th>りんご</th>
      <th>みかん</th>
      <th>にんじん</th>
      <th>とまと</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>太郎くん</th>
      <td>5個</td>
　　　　　　　　　　　　<td>10個</td>
      <td>3個</td>
　　　　　　　　　　　　<td>2個</td>
    </tr>
    <tr>
      <th>二郎くん</th>
      <td>2個</td>
　　　　　　　　　　　　<td>15個</td>
      <td>2個</td>
　　　　　　　　　　　　<td>4個</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>合計</th>
      <td>7個</td>
　　　　　　　　　　　　<td>25個</td>
      <td>5個</td>
　　　　　　　　　　　　<td>6個</td>
    </tr>
  </tfoot>
</table>

`<tr>` : 表本体要素

表内でセルの行を定義する要素で、<th> と <td>を内容します。

<table>
  <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption>
  <colgroup>
    <col span="2"> <!--果物-->
    <col span="2"> <!--野菜-->
  </colgroup>
  <thead>
    <tr>
      <!-- 以下にテーブルの要素が入ります。-->
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- 以下にテーブルの要素が入ります。-->
    </tr>
    <tr>
      <!-- 以下にテーブルの要素が入ります。-->
    </tr>
  </tbody>
  <tfoot>
    <tr>
        <!-- 以下にテーブルの要素が入ります。-->
    </tr>
  </tfoot>
</table>

`<th>` : table header要素

表のセルのヘッダーであるセルを定義する要素です。

<table>
  <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption>
  <colgroup>
    <col span="2"> <!--果物-->
    <col span="2"> <!--野菜-->
  </colgroup>
  <thead>
    <tr>
      <td> </td>
      <th>りんご</th>
      <th>みかん</th>
      <th>にんじん</th>
      <th>とまと</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>太郎くん</th>
      <!-- 以下にテーブルの要素が入ります。-->
    </tr>
    <tr>
      <th>二郎くん</th>
      <!-- 以下にテーブルの要素が入ります。-->
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>合計</th>
      <!-- 以下にテーブルの要素が入ります。-->
    </tr>
  </tfoot>
</table>

`<td>` : table data要素

表のセルのデータを定義する要素です。

<table>
  <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption>
  <colgroup>
    <col span="2"> <!--果物-->
    <col span="2"> <!--野菜-->
  </colgroup>
  <thead>
    <tr>
      <td> </td>
      <th>りんご</th>
      <th>みかん</th>
      <th>にんじん</th>
      <th>とまと</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>太郎くん</th>
      <td>5個</td>
　　　　　　　　　　　　<td>10個</td>
      <td>3個</td>
　　　　　　　　　　　　<td>2個</td>
    </tr>
    <tr>
      <th>二郎くん</th>
      <td>2個</td>
　　　　　　　　　　　　<td>15個</td>
      <td>2個</td>
　　　　　　　　　　　　<td>4個</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>合計</th>
      <td>7個</td>
　　　　　　　　　　　　<td>25個</td>
      <td>5個</td>
　　　　　　　　　　　　<td>6個</td>
    </tr>
  </tfoot>
</table>

TABLEの最小サンプル

<table>タグは以下の要素が必要になります。

	`<table>`タグの中には以下コンテンツが入る
1	任意の1個の`<caption>` 要素	省略可
2	0個以上の`<colgroup>` 要素	省略可
3	任意の1個の`<thead>` 要素	省略可
4	次の2つの選択肢から1つ
	・ 0個以上の`<tbody>` 要素・ 1個以上の`<tr>` 要素
5	任意の1個の`<tfoot>` 要素

この要素を加味すると最小でテーブルを作るとこうなります。

<table>
  <tr>
    <th>太郎くん</th>
    <td>１０さい</td>
  </tr>
</table>

アクセシビリティを意識したサンプル

<table >
  <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption>
  <colgroup>
    <col span="2"> <!--果物-->
    <col span="2"> <!--野菜-->
  </colgroup>
  <thead>
    <tr>
      <td> </td>
      <th scope="col">りんご</th>
      <th scope="col">みかん</th>
      <th scope="col">にんじん</th>
      <th scope="col">とまと</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">太郎くん</th>
      <td>5個</td>
　　　　　　　　　　　　<td>10個</td>
      <td>3個</td>
　　　　　　　　　　　　<td>2個</td>
    </tr>
    <tr>
      <th scope="row">二郎くん</th>
      <td>2個</td>
　　　　　　　　　　　　<td>15個</td>
      <td>2個</td>
　　　　　　　　　　　　<td>4個</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">合計</th>
      <td>7個</td>
　　　　　　　　　　　　<td>25個</td>
      <td>5個</td>
　　　　　　　　　　　　<td>6個</td>
    </tr>
  </tfoot>
</table>

アクセシビリティで、意識すること

caption要素やsummary属性を追加することで、スクリーンリーダーユーザーが概略を理解できるようにする

HTML5では、summary属性は廃止されたので使う際は注意が必要。

summary属性をサポートしている人としてない人で情報に差が出てしまうので、要注意と評価される。
そのため、サンプルでは、caption要素しか追加してません。
ただ、caption要素とsummary属性を追加する場合は、違う内容を提供しなければなりません。

ref

データテーブルで見出しセルとデータセルを関連付けるために、scope 属性を使用する

th要素全てに、scope 属性があることが必要です。
見出しとしての役割を果たす全ての th 要素に、scope 属性があることが必要です。
全てのscope属性に、値として row、col、rowgroup、又は colgroup があることを確認する。

ref

H63: データテーブルで見出しセルとデータセルを関連付けるために、scope 属性を使用する

アクセシビリティを意識した<Table>の作り方

概要

TABLEで使えるタグについて

<table> : 表要素

<caption> : 表キャプション要素

<colgroup> : 列グループ定義要素

<thead> : 表ヘッダー要素

<tbody> : 表本体要素

<tfoot> : 表本体要素

<tr> : 表本体要素

<th> : table header要素

<td> : table data要素