アクセシビリティの基本【tableタグ】スマホ横スクロール

HTMLで表を作るときに使うのが table タグです。表はデータを整理して見やすく表示するのに便利です。ここでは table タグの基本と、アクセシビリティを意識した使い方も紹介します。

1 tableタグの基本構造

• <table> … 表全体を囲むタグ
• <caption> … 表のタイトル（スクリーンリーダーでも読み上げられる）
• <thead> … 表の見出し行をまとめるタグ
• <tbody> … 表のデータ行をまとめるタグ
• <tr> … 行（row）を作るタグ
• <th> … 見出しセル（header）
• <td> … データセル（data）

2 アクセシビリティを意識したtableのポイント

• キャプションを追加する： <caption> を使うと表の内容を簡単に説明でき、スクリーンリーダーで読み上げられます。
• ヘッダーとデータの関連を明示する： 複雑な表の場合、scope="col" や scope="row" を <th> に付けて列や行を明示します。
• 表の構造をシンプルに： 多重の結合セル（rowspan や colspan）は必要最小限に抑えるとスクリーンリーダーで理解しやすくなります。
• 色だけで意味を伝えない： 色で強調する場合は、テキストや記号でも意味を伝えるようにします。

3 scope 属性の説明

• scope="col" … この <th> は列全体の見出しであることを示す
• scope="row" … この <th> は行全体の見出しであることを示す

4 スマホ対応！横スクロールできる表の作り方

PCではきれいに表示される表でも、スマートフォンで見ると横幅が狭くてレイアウトが崩れてしまうことがあります。
そんなときにおすすめなのが、横スクロール対応のテーブルデザインです。
以下のコードを使えば、スマホでもスムーズにスクロールできる表を簡単に実装できます。

<div class="table-scroll-container">
    <table class="responsive-table">
  
  テーブル内容
   
    </table>
</div>

5 ブログでコピペできるアクセシブルな表サンプル

<div class="table-scroll-container">
  <table class="responsive-table" border="1" cellpadding="5" cellspacing="0">
    <caption>社員の基本情報</caption>
    <thead>
      <tr>
        <th scope="col">名前</th>
        <th scope="col">年齢</th>
        <th scope="col">職業</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">田中 太郎</th>
        <td>28</td>
        <td>エンジニア</td>
      </tr>
      <tr>
        <th scope="row">鈴木 花子</th>
        <td>34</td>
        <td>デザイナー</td>
      </tr>
      <tr>
        <th scope="row">佐藤 次郎</th>
        <td>45</td>
        <td>講師</td>
      </tr>
    </tbody>
  </table>
</div>

6 汎用CSS

/* スクロール可能なコンテナ */
.table-scroll-container {
  overflow-x: auto;
  margin-bottom: 1.5em;
}

/* テーブル全体のスタイル */
.responsive-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 700px; /* 横幅が狭い端末でもスクロールできるように */
}

/* セルの共通スタイル */
.responsive-table th,
.responsive-table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
  background-color: #fff;
}

/* ヘッダー部分を強調 */
.responsive-table thead th {
  background-color: #f2f2f2;
  font-weight: bold;
}

7 ポイント

• <thead> を使うと表の見出し行をまとめられるため、CSSで固定表示やスタイル調整がしやすくなります。
• 見出しセルは <th> を使うと自動で太字・中央寄せになります。
• 表に境界線を付けたいときは border="1" を使用できます。
• セルの余白は cellpadding、セル間の隙間は cellspacing で調整可能です。
• <th scope="col"> は「この列全体の見出し」を示します。
• <th scope="row"> は「この行全体の見出し」を示します。
• .table-scroll-container は横スクロールを可能にするためのラッパーです。
• min-width を設定して、スマホでテーブルが潰れないようにしています。
• 横スクロールはCSSのみで実装できるため、JavaScript不要で軽量。
• デザインを自由にしたい場合は CSS で装飾するのがおすすめです。

8 完成イメージ

9 まとめ

アクセシビリティ対応の表を作ることで、視覚に障害がある人でも情報を正しく理解できます。<caption> や scope を正しく使い、複雑すぎない表を意識することがポイントです。

スクリーンリーダーは <th scope="col">、<th scope="row"> をもとに「列名」「行名」と紐づけて読み上げるので、視覚に障害がある人でも表の構造を理解できます。