SST - テーブルの統一規格

定義

SST規格は、テーブルのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています。

構造と意味

テーブルの基本要素

• テーブルにタイトルや簡潔な説明が必要な場合は、<caption>で指定する。<caption>を置く場合は、<table>内の最初の要素にする。キャプションはテーブルの目的を理解する助けになるが、それだけでSEOの改善が保証されるわけではない。
• <thead>は列見出しを含む行をまとめる。印刷時にページをまたぐ場合、ブラウザーやドキュメント生成ツールがこのグループを繰り返すことがある。実際の動作は印刷エンジンとページ分割の設定によって異なる。
• ひとつ以上の<tbody>でデータ行をまとめる。行を論理的なまとまりに分ける場合は、複数の<tbody>を使用できる。ひとつのテーブルに置ける<thead>と<tfoot>はそれぞれ最大ひとつ。
• <tfoot>には合計や集計の行を置く。現在のHTMLモデルでは、テーブルの行グループの後に配置する。CSSではテーブルのフッターグループとして表示される。<tfoot>を<tbody>より前に置く古い例を、現在のマークアップ規則として扱わない。
• <tr>は行、<th>は見出しセル、<td>はデータセルを表す。<th>と<td>は見た目ではなく、コンテンツの実際の役割に合わせて使い分ける。

列グループ

• <colgroup>は列のグループを表し、<caption>の後、行グループの前に置く。
• <col>は<colgroup>内のひとつ以上の列を定義する。span属性で、その要素が対象とする列数を指定する。
• <colgroup>に<col>要素を含める場合は、列数を<col>のspanで指定する。別の方法として、子の<col>要素を持たない空の<colgroup>に直接spanを指定できる。
• <col>と<colgroup>は列幅や背景色の指定に使える。ただし適用できるCSSプロパティは限られる。たとえば、<col>のtext-alignやpaddingでは、テキストの配置やセル内余白を設定できない。
• 列の背景は行やセルの背景より背面に描画される。<th>や<td>に不透明な背景が設定されていると、<col>の色が見えない場合がある。<col>で指定した列の境界線が表示されるのは、境界線を結合するモデルを使用する場合に限られる。

アクセシビリティ

見出しとセルの関連付け

• 単純なテーブルでは、列見出しに<th scope="col">、行見出しに<th scope="row">を使用する。scope属性で、見出しセルと対象データの関係を示す。
• 複数の行や列のグループを対象とする見出しには、テーブル構造が該当するグループに対応している場合、scope="rowgroup"またはscope="colgroup"を使用する。
• 階層が複数ある見出しや、隣接しない見出しを含む複雑なテーブルでは、scopeだけでは不十分な場合がある。<th>に一意のidを付け、<td>のheadersに対応する値を指定して、見出しとデータセルを明示的に関連付ける。
• 見た目だけでは、見出しとデータの関係をプログラムで判別できない。支援技術を使ってテーブル構造を確認する。

単純な行見出しと列見出しの例：

<table>
  <caption>プロジェクト参加者</caption>
  <thead>
    <tr>
      <th scope="col">項目</th>
      <th scope="col">値</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">ユーザー名</th>
      <td>アレクセイ</td>
    </tr>
  </tbody>
</table>

スタイルとテーブルモデル

余白、境界線、空のセル

• 内側の余白は<th>と<td>に設定する。行要素<tr>のpaddingでは、その行のセルの内側余白を制御できない。
• border-collapse: collapseは隣接するセルの境界線をひとつのグリッドにまとめる。border-collapse: separateでは、境界線とその間隔を個別に扱う。
• empty-cells: showとempty-cells: hideは、border-collapse: separateの場合に限り、空のセルの境界線と背景の表示を制御する。このプロパティはセルをテーブルから削除するものでも、欠損データの意味を定義するものでもない。
• 値がないことがデータの解釈に関わる場合は、意味が分かる値や状態を示す。空のセルによって曖昧さが生じないようにする。

テーブルモデルの維持

• 内容が実際に行と列を表す場合、<table>、<tr>、<th>、<td>はネイティブのテーブル表示モデルを維持する。
• テーブル行のdisplayをflexやgridに変更するとレイアウトアルゴリズムが変わる。その行のセルはテーブル全体のグリッドに参加しなくなり、行をまたいだ列の位置が揃わなくなる場合がある。
• テーブルをレスポンシブにする際は、まずネイティブな幅、コンテンツの折り返し、コンテナーのスクロールを調整する。カード形式への変更は別の表示方法として実装し、見出しとデータの関係および読みやすい順序を維持する。

データの配置

• ブラウザーの既定スタイルに任せず、CSSで配置を明示する。
• テキストは通常、行の先頭に、数値は行末に揃えると比較しやすい。RTLではleftやrightを固定的に使わず、text-align: startやtext-align: endなどの論理的な配置を使う。
• 小数点や小数コンマの位置を揃えて数値を比較する場合は、対象ロケールに対応した専用のマークアップまたは書式設定を使う。

固定テーブルレイアウト

• table-layout: fixedは、列幅をより予測しやすく配分する必要があり、テーブル自体にauto以外の幅が指定されている場合に適している。
• 固定レイアウトでは、まず<col>に指定した幅、次に最初の行のセルに指定した幅で列幅が決まる。残りの幅は他の列に配分される。
• このアルゴリズムはすべてのセル内容への依存を抑え、レイアウトを簡略化できる場合がある。ただし、どの画面でも描画が高速になるとは限らない。長い内容は折り返されたり、セルからはみ出したりするため、個別の処理が必要になる場合がある。

レスポンシブ対応とスクロール

• 読みやすさを保ったままテーブルが利用可能な幅に収まらない場合は、overflow-x: autoを設定した別のコンテナー内に横スクロールを限定する。コンテナー幅は親領域の幅に収める。
• <table>はネイティブのテーブル表示を維持する。オーバーフロー用コンテナーの代わりにdisplay: blockを使用しない。表示形式の変更により、行のレイアウトや共通する列の整列が崩れることがある。
• 横スクロールの存在が分かり、キーボードでも操作できる必要がある。独立したスクロール領域には、分かりやすいアクセシブルな名前、見えるフォーカス表示、キーボードでのフォーカス可能性を設ける。ただし、ブラウザーや領域内のコンテンツですでに満たされている場合は除く。
• -webkit-overflow-scrolling: touchは、iOS/iPadOS 13以降で慣性スクロールを有効にするための基本要件ではない。iPhoneではスタッキングコンテキストを作る副作用がある。古い対象環境で必要性が確認され、副作用も検証された場合に限り残す。
• 狭い画面ではスクロールだけでなく、すべての列、見出し、値、セル内のフォーカス可能な要素にアクセスできることも確認する。

スクロール可能なコンテナーの例：

<div
  class="table-scroll"
  role="region"
  aria-label="月別売上の概要"
  tabindex="0"
>
  <table class="data-table data-table--wide">
    <caption>月別売上の概要</caption>
    <colgroup>
      <col class="data-table__month">
      <col span="2" class="data-table__metrics">
    </colgroup>
    <thead>
      <tr>
        <th scope="col">月</th>
        <th scope="col">注文数</th>
        <th scope="col">売上</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1月</th>
        <td>120</td>
        <td>360,000 ₽</td>
      </tr>
      <tr>
        <th scope="row">2月</th>
        <td>145</td>
        <td>435,000 ₽</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row">合計</th>
        <td>265</td>
        <td>795,000 ₽</td>
      </tr>
    </tfoot>
  </table>
</div>

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table--fixed {
  table-layout: fixed;
}

.data-table--separate {
  border-collapse: separate;
  empty-cells: hide;
}

.data-table--wide {
  min-width: 42rem;
}

.data-table__month {
  width: 40%;
}

.data-table__metrics {
  background-color: #f5f5f5;
}

.data-table th,
.data-table td {
  padding: 0.75rem;
  border: 1px solid #ccc;
}

.data-table th {
  text-align: start;
}

.data-table td {
  text-align: end;
}

.table-scroll:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

クラスdata-table--wideは、列に明示的な最小幅が必要な場合にのみ使用する。42remは例であり、コンテンツに合わせて調整する。<col>で指定した背景は、セルや行の背景で覆われない限り表示される。

追加の状態

固定ヘッダー

• 行数の多いテーブルでは、<thead>内の<th>にposition: stickyを指定し、縦スクロール中も見出しを表示できる。
• 固定するセルには位置のオフセットと背景を指定し、必要に応じてz-indexを設定する。設定がないと、行の内容が透けたり、見出しに重なったりする場合がある。
• position: stickyの範囲は最も近いスクロールコンテナーによって制限される。固定ヘッダーと横スクロール領域を組み合わせる場合は、ページ全体のスクロール時とコンテナー内のスクロール時の両方を確認する。

固定見出しの例：

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #fff;
}

印刷時のヘッダー

• <thead>は意味上のヘッダーグループを維持する。印刷やPDF生成のエンジンは、複数ページにわたる長いテーブルでヘッダーを繰り返す場合がある。対象環境で結果を確認する。

テスト

• テーブル構造がデータの種類に合い、caption、colgroup、thead、tbodyグループ、tfootが適切な順序で配置されていることを確認する。
• 各行と列に分かりやすい見出しがあることを確認し、scopeまたはid/headersによる関連付けをスクリーンリーダーでテストする。
• 複数の<tbody>、結合セル、階層的な見出しを使う場合は、それらのテーブルも確認する。
• 狭い画面で横スクロール、キーボード操作、ページ全体の横方向へのはみ出しがないことを確認する。
• table-layout: fixed使用時の長い内容の表示と、固定ヘッダーを使う場合のフォーカスや重なり順を確認する。
• 実際のborder-collapseの値で空のセルを確認する。空の値によってデータの意味が変わらないようにする。
• 対象のブラウザーとPDF生成ツールで、印刷時の表示とヘッダーの繰り返しを確認する。

SSTチェックリスト