先生と生徒の会話形式で理解しよう

生徒

「Bootstrapでテーブルを作るときって、デザイン以外にも気をつけることはありますか？」

先生

「ありますよ。テーブルは“情報を正しく伝える構造”がとても大事で、アクセシビリティにも大きく関わるんです。」

生徒

「見た目が整っていれば十分だと思っていました…他に何をすればいいんですか？」

先生

「見出しやスコープ、キャプションを正しくつけることで、すべての人にとって読みやすいテーブルになります。今から一つずつ説明しますね。」

1. テーブルの見出しを正しく指定すると“読む順番”が分かりやすくなる

テーブルで最初に押さえておきたいのは、見出しを表す <th> の使い方です。多くの初心者は、見た目が太字になるからという理由だけで th を使いがちですが、本来の役割は「ここが見出しですよ」とスクリーンリーダーや検索エンジンに伝えることです。

見出しが正しくマークアップされていると、読み上げソフトは「この列は名前のデータです」「この行は商品の情報です」というように、文脈を理解しやすくなります。


<table class="table table-bordered">
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>りんご</td>
      <td>120円</td>
      <td>あり</td>
    </tr>
  </tbody>
</table>

ブラウザ表示

このように th を正しく使うだけでも、テーブルの意味は格段に伝わりやすくなります。

2. scope属性で「どのデータとつながっているか」を明確にする

見出しをつけるだけでは、行と列の対応が曖昧になってしまうことがあります。そこで重要なのが scope属性 です。これは「この th は、列の見出しなのか、行の見出しなのか」をはっきり宣言するための仕組みです。

例えば、行方向の見出しなら scope="row"、列方向なら scope="col" をつけます。これにより読み上げソフトは「これは価格列の見出しだ」と理解しながら読み進めることができます。


<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">商品名</th>
      <th scope="col">価格</th>
      <th scope="col">在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">りんご</th>
      <td>120円</td>
      <td>あり</td>
    </tr>
    <tr>
      <th scope="row">みかん</th>
      <td>80円</td>
      <td>なし</td>
    </tr>
  </tbody>
</table>

ブラウザ表示

scope をつけることで、テーブルの関連性がより明確になり、視覚的に見ている人だけでなく、音声で聞いている人にも理解しやすくなります。

3. テーブルの目的を説明するキャプションを追加しよう

テーブルはページ内に複数置かれることも多く、その内容が一目で分からない場面があります。そこで役立つのが <caption> です。これは「このテーブルは何のためのものか」を冒頭で説明する役割があります。

キャプションは画面上では控えめに見えますが、スクリーンリーダーにとっては非常に重要で、最初に読み上げられる情報でもあります。


<table class="table table-hover">
  <caption>果物の在庫と価格一覧</caption>
  <thead>
    <tr>
      <th scope="col">商品名</th>
      <th scope="col">価格</th>
      <th scope="col">在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>バナナ</td>
      <td>150円</td>
      <td>あり</td>
    </tr>
  </tbody>
</table>

ブラウザ表示

このようにキャプションをつけることで、内容を知らないユーザーにも目的が即座に伝わるテーブルになります。