HTML 表の高度な機能とアクセシビリティ

このモジュールの 2 番目の記事では、HTML テーブルのより高度な機能 (キャプション/要約、行をテーブルのヘッダー、本文、フッターのセクションにグループ化するなど) や、視覚障碍のあるユーザーのためのテーブルのアクセシビリティについて調べます。

前提知識: HTML の基礎（ HTML 入門を参照）。
目的: 表のより高度な機能やアクセシビリティについて学びます。

<caption> を用いて表にキャプションを追加する

テーブルにキャプションを付けるには、<caption> 要素内に配置し、それを <table> 要素内に入れます。これは <table> 要素の開始タグすぐ下に置くべきです。

html
<table>
  <caption>
    ジュラ紀の恐竜
  </caption>

  …
</table>

上記の簡単な例から推測できるように、キャプションには表の内容の説明が含まれています。 これは、ページに目を通して表が役に立つかどうかをすぐに把握したい全ての読者にとって便利ですが、特に盲目のユーザーにとっては便利です。 スクリーンリーダーに表の内容を知るためだけに多くのセルの内容を読み上げさせるのではなく、キャプションを頼りにして表をより詳細に読み取るかどうかを決定できます。

キャプションは <table> タグのすぐ下に配置します。

メモ: summary 属性は、<table> 要素で説明を提供するためにも使用できます。 これはスクリーンリーダーによっても読み上げられます。しかし、<caption>要素を使用することをお勧めします。なぜなら、summary は非推奨であり、視覚ユーザーには読めないからです（ページに現れません）。

アクティブラーニング: キャプションの追加

前の記事で最初に出会った例を再考しながら、これを試してみましょう。

  1. HTML 表の基本の最後から語学教師の学校の時間割を開くか、または timetable-fixed.html ファイルのローカルコピーを作成してください。
  2. 表に適切なキャプションを追加します。
  3. コードを保存してブラウザーで開くと、コードがどのように見えるかがわかります。

メモ: GitHub で私たちのバージョンを見ることができます。 timetable-caption.html を見てください（ライブもご覧ください）。

<thead>、<tbody>、<tfoot> を用いて構造を追加

表の構造がもう少し複雑になったら、それらにもっと構造的な定義を与えることは有用です。 これを行う明確な方法の 1 つは、<thead>、<tbody>、<tfoot> を使用することです。 これにより、表のヘッダー、フッター、および本体のセクションをマークアップできます。

これらの要素によって表がスクリーンリーダーのユーザーにアクセスしやすくなることはなく、また視覚的な機能強化が生じることもありません。 ただし、これらはスタイリングやレイアウトに非常に役立ちます — CSS を表に追加するための便利なフックとして機能します。 いくつか興味深い例を挙げると、長い表の場合、全ての印刷ページで表のヘッダーとフッターを繰り返すようにしたり、表の本体を単一ページに表示して、上下にスクロールして内容を表示したりすることができます。

使用するためには、以下の順番で記載してください。

  • <thead> 要素は、表のヘッダー部分を囲む必要があります — これは通常、列見出しを含む最初の行になりますが、必ずしもそうとは限りません。 <col> 要素や <colgroup> 要素を使用している場合、表のヘッダーはそれらのすぐ下にくるはずです。
  • <tbody> 要素は、表のヘッダーまたはフッターではない表のコンテンツの他の部分を囲む必要があります。
  • <tfoot> 要素は、表のフッター部分を囲む必要があります。これは、例えば、前の行の項目が合計された最終行になります。

メモ: <tbody> は常に全ての表に含まれていて、コードで指定しない場合にも暗黙的に含まれます。 これを確認するには、<tbody> を含まない以前の例の 1 つを開き、ブラウザー開発者ツールの HTML コードを調べます — ブラウザーによってこのタグが追加されたことがわかります。 なぜそれを含まないのかと疑問に思うかもしれません — すべき、表の構造とスタイリングがより細かく制御できるためです。

アクティブラーニング: 表構造の追加

これらの新しい要素を実行してみましょう。

  1. まず、新しいフォルダーに spending-record.html と minimal-table.css のローカルコピーを作成します。

  2. ブラウザーでそれを開いてみてください。あなたはそれが問題ないように見えますが、それは改善されることになるかもしれません。 支出額の合計を含む "SUM" 行は間違った場所にあるように思われ、コードから抜けている細部がいくつかあります。

  3. 明白なヘッダー行を <thead> 要素内に、 "SUM" 行を <tfoot> 要素内に、そして残りの内容を <tbody> 要素内に配置します。

  4. 保存して更新すると、<tfoot> 要素を追加すると "SUM" 行が表の一番下に移動していることがわかります。

  5. 次に、colspan 属性を追加して "SUM" セルを最初の 4 列にまたがるようにします。そのため、実際の数は "Cost" 列の下部に表示されます。

  6. これらの要素が CSS を適用するためにどれほど有用であるかのアイデアをあなたに与えるために、表にいくつかの簡単な追加のスタイリングを追加しましょう。 HTML 文書の <head> の中には、空の <style> 要素があります。 この要素内に、次の CSS コード行を追加します。

    css
    tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

  7. 保存して更新し、結果を確認します。 <tbody> 要素と <tfoot> 要素が適切に配置されていない場合は、同じスタイルを適用するためにはるかに複雑なセレクター/規則を記述する必要があります。

メモ: 現時点で私たちはあなたが CSS を完全に理解しているとは思っていません。 あなたが私たちの CSS モジュールを一通り学ぶとき、これについてより多くを学ぶでしょう（CSS 入門は始めるのに良い場所です。 スタイル設定された表に関する具体的な記事もあります）。

最終的な表は、次のようになるでしょう。

メモ: GitHub で spending-record-finished.html として見ることもできます。

ネストした表

<table> 要素を含む完全な構造を含める限り、表を別の表の中にネストすることは可能です。 そのマークアップがスクリーンリーダーのユーザーにとって混乱を招きやすく、アクセスしにくくなるため、これは一般的にはあまり推奨されません。 多くの場合、既存の表に追加のセル/行/列を挿入することもできます。 ただし、他のソースからコンテンツを簡単にインポートしたい場合などは、時々必要になります。

次のマークアップは、単純なネストした表を示しています。

html
<table id="table1">
  <tr>
    <th>title1</th>
    <th>title2</th>
    <th>title3</th>
  </tr>
  <tr>
    <td id="nested">
      <table id="table2">
        <tr>
          <td>cell1</td>
          <td>cell2</td>
          <td>cell3</td>
        </tr>
      </table>
    </td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
</table>

その出力は次のようになります。

視覚障碍者向けの表

データ表の使用方法について簡単に説明しましょう。 表は、データにすばやくアクセスし、さまざまな値を検索できるようにするための便利なツールです。例えば、昨年 8 月に Gent で販売された指輪 (Rings) の数を確認するには、下の表を見てください。その情報を理解するために、この表内のデータとその列ヘッダーや行ヘッダーとの間の視覚的な関連付けを行います。

Items Sold August 2016
Clothes Accessories
Trousers Skirts Dresses Bracelets Rings
Belgium Antwerp 56 22 43 72 23
Gent 46 18 50 61 15
Brussels 51 27 38 69 28
The Netherlands Amsterdam 89 34 69 85 38
Utrecht 80 12 43 36 19

しかし、あなたがそれらの視覚的な関連付けをすることができないならば、どうですか？ では、どのようにして上記のような表を読むことができますか？ 視覚障碍者は、ウェブページの情報を読み上げるスクリーンリーダーをよく使用します。 平文を読んでいるときはこれは問題ありませんが、表を解釈することは視覚障碍者にとっては非常に困難な場合があります。 それでも、適切なマークアップを使用して、視覚的な関連付けをプログラムによる関連付けに置き換えることができます。

メモ: WHO のデータによると、2017 年の視覚障碍者は約 253 百万人です。

記事のこの節では、可能な限りアクセス可能な表にするためのその他の手法について説明します。

列ヘッダーと行ヘッダーを使用する

スクリーンリーダーは全てのヘッダーを識別し、それらを使用してそれらのヘッダーとそれらが関連するセルとの間のプログラムによる関連付けを行います。 列ヘッダーと行ヘッダーの組み合わせにより、各セル内のデータが識別および解釈されるため、スクリーンリーダーのユーザーは、晴眼のユーザーの場合と同様に表を解釈できます。

前の記事ですでにヘッダーについて説明しました。 <th> 要素によるヘッダーの追加を参照してください。

scope 属性

この記事の新しい話題は scope 属性です。 これは <th> 要素に追加して、ヘッダーがどのセルのヘッダーであるかをスクリーンリーダーに正確に伝えることができます — 例えば、それが入っているのは行のヘッダーなのか、それとも列のヘッダーなのか？ 先ほどの支出記録の例を振り返ると、次のように列ヘッダーを列ヘッダーとして明確に定義できます。

html
<thead>
  <tr>
    <th scope="col">Purchase</th>
    <th scope="col">Location</th>
    <th scope="col">Date</th>
    <th scope="col">Evaluation</th>
    <th scope="col">Cost (€)</th>
  </tr>
</thead>

そして各行は次のように定義されたヘッダーを持つことができます(列ヘッダーと同様に行ヘッダーを追加した場合)。

html
<tr>
  <th scope="row">Haircut</th>
  <td>Hairdresser</td>
  <td>12/09</td>
  <td>Great idea</td>
  <td>30</td>
</tr>

スクリーンリーダーは、このように構成されたマークアップを認識し、例えば、ユーザーが列全体または行全体を一度に読み上げることを可能にします。

scope には、さらに 2 つの可能な値、colgroup と rowgroup があります。 これらは、複数列または複数行の上に位置する見出しに使用されます。 このセクションの最初にある "Items Sold August 2016" の表を見ると、"Clothes" セルが "Trousers"、"Skirts"、"Dresses" のセルの上に位置することがわかります。 これらのセルは全てヘッダー(<th>)としてマークアップするべきで、 "Clothes" はそれらの上に位置し、他の 3 つの小見出しを定義する見出しです。 従って、"Clothes" は scope="colgroup" の属性を得るべきですが、それ以外は scope="col" の属性を得ます。

html
<thead>
  <tr>
    <th colspan="3" scope="colgroup">Clothes</th>
  </tr>
  <tr>
    <th scope="col">Trousers</th>
    <th scope="col">Skirts</th>
    <th scope="col">Dresses</th>
  </tr>
</thead>

グループ化された複数の行のヘッダーも同様です。今度は "Items Sold August 2016" の表を、"Amsterdam" と "Utrecht" のヘッダー (<th>) を持つ行に注目して見てみましょう。 "The Netherlands" のヘッダーも <th> 要素としてマークアップされ、他の2種類の小見出しの見出しとして、両方の行にまたがっていることに気づくでしょう。したがって、scope="rowgroup" をこの見出しセルに指定して、スクリーンリーダーが正しい関連付けを作成するようにしてください。

html
<tr>
  <th rowspan="2" scope="rowgroup">The Netherlands</th>
  <th scope="row">Amsterdam</th>
  <td>89</td>
  <td>34</td>
  <td>69</td>
</tr>
<tr>
  <th scope="row">Utrecht</th>
  <td>80</td>
  <td>12</td>
  <td>43</td>
</tr>

id 属性と headers 属性

scope 属性を使用する代わりに、id 属性と headers 属性を使用して、ヘッダーとセル間の関連付けを作成することもできます。

headers 属性はスペース区切りの文字列の順不同リストを取ります。それぞれが、データセル（<td> 要素）または別のヘッダーセル（<th> 要素）の見出しを提供する <th> 要素の一意の id に対応します。

これは HTML の表において、表の中の各セルの位置を、表計算ソフトのように、所属する行と列のそれぞれのヘッダーによって定義します。これがうまく動作するためには、表の列と行の両方のヘッダーがどうしても必要です。

"Items Sold August 2016" の例に戻ると、以下のように id 属性と headers 属性を使用することができます：

  1. 表のそれぞれの <th> 要素に固有の id を追加します。
  2. headers 属性をそれぞれの小見出しとして機能する、つまり上にヘッダー要素がある、それぞれの <th> 要素に追加します。値は最上部に位置し、小見出しを定義する見出しの id で、例えばこの例では列のヘッダーは "clothes"、行のヘッダーは "belgium" となります。
  3. それぞれの <td> 要素に headers 属性を追加し、そこに関連する <th> 要素の id のスペース区切りのリストの形で追加します。スプレッドシートと同じように作業を進めることができます。データセルを探し、対応する行と列の見出しを探します。指定する id の順番は重要ではありませんが、整理しておくために一貫性を持たせておく必要があります。
html
<thead>
  <tr>
    <th id="clothes" colspan="3">Clothes</th>
  </tr>
  <tr>
    <th id="trousers" headers="clothes">Trousers</th>
    <th id="skirts" headers="clothes">Skirts</th>
    <th id="dresses" headers="clothes">Dresses</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="belgium" rowspan="3">Belgium</th>
    <th id="antwerp" headers="belgium">Antwerp</th>
    <td headers="antwerp belgium clothes trousers">56</td>
    <td headers="antwerp belgium clothes skirts">22</td>
    <td headers="antwerp belgium clothes dresses">43</td>
  </tr>
</tbody>

メモ: この方法では、ヘッダーとデータセルの間に非常に正確な関連付けが作成されますが、マークアップがはるかに多くなり、エラーの余地がありません。 scope アプローチは通常ほとんどの表に十分です。

アクティブラーニング: scope と headers で遊ぶ

  1. この最後の演習では、まず items-sold.html と minimal-table.css のローカルコピーを新しいディレクトリーに作成してください。
  2. この表をより適切にするために適切な scope 属性を追加してみてください。
  3. 最後に、最初のファイルの別のコピーを作成して、今度は、id 属性と headers 属性を使用して表にアクセスしやすくします。

メモ: 完成した例と照らし合わせて作業内容を確認できます — items-sold-scope.html(ライブもご覧ください)および items-sold-headers.html(ライブもご覧ください)。

まとめ

HTML の表について学ぶことは他にもいくつかありますが、知っておく必要があるものはこれですべてです。次に、HTML 表の評価試験で自分自身を試してみることができます。楽しんでください！

すでに CSS を学んでいて、評価試験がうまくいったなら、移動して HTML 表のスタイル設定について学びましょう。表のスタイル設定を参照してください。

CSS の学習を始めたい場合は、CSS 学習領域を調べてください。