HTML テーブル アクセシビリティの例

HTML table accessibility

scope属性

<table class="table table-bordered">
  <caption>商品の販売データ</caption>
  <thead>
    <tr>
      <th scope="col">商品名</th>
      <th scope="col" colspan="2">販売数</th> <!-- 2列にまたがるヘッダー -->
      <th scope="col">総売上</th>
    </tr>
    <tr>
      <th scope="col"> </th> <!-- 空のセル -->
      <th scope="col">国内</th>
      <th scope="col">海外</th>
      <th scope="col"> </th> <!-- 空のセル -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">商品A</th>
      <td>100</td>
      <td>50</td>
      <td>150</td>
    </tr>
    <tr>
      <th scope="row">商品B</th>
      <td>200</td>
      <td>80</td>
      <td>280</td>
    </tr>
  </tbody>
</table>

商品の販売データ

商品名	販売数		総売上
	国内	海外
商品A	100	50	150
商品B	200	80	280

headers属性

<table class="table table-bordered">
  <caption>商品の販売データ</caption>
  <thead>
    <tr>
      <th id="product">商品名</th>
      <th id="sales" colspan="2">販売数</th>
      <th id="total">総売上</th>
    </tr>
    <tr>
      <th> </th> <!-- 空のセル -->
      <th id="domestic">国内</th>
      <th id="international">海外</th>
      <th> </th> <!-- 空のセル -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="product">商品A</td>
      <td headers="sales domestic">100</td>
      <td headers="sales international">50</td>
      <td headers="total">150</td>
    </tr>
    <tr>
      <td headers="product">商品B</td>
      <td headers="sales domestic">200</td>
      <td headers="sales international">80</td>
      <td headers="total">280</td>
    </tr>
  </tbody>
</table>

商品の販売データ

商品名	販売数		総売上
	国内	海外
商品A	100	50	150
商品B	200	80	280

ARIA role属性

<table role="table" class="table table-bordered">
  <caption>商品の販売データ</caption>
  <thead role="rowgroup">
    <tr role="row">
      <th id="product" role="columnheader">商品名</th>
      <th id="sales" role="columnheader" colspan="2">販売数</th>
      <th id="total" role="columnheader">総売上</th>
    </tr>
    <tr role="row">
      <th> </th> <!-- 空のセル -->
      <th id="domestic" role="columnheader">国内</th>
      <th id="international" role="columnheader">海外</th>
      <th> </th> <!-- 空のセル -->
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell" headers="product">商品A</td>
      <td role="cell" headers="sales domestic">100</td>
      <td role="cell" headers="sales international">50</td>
      <td role="cell" headers="total">150</td>
    </tr>
    <tr role="row">
      <td role="cell" headers="product">商品B</td>
      <td role="cell" headers="sales domestic">200</td>
      <td role="cell" headers="sales international">80</td>
      <td role="cell" headers="total">280</td>
    </tr>
  </tbody>
</table>

商品の販売データ

商品名	販売数		総売上
	国内	海外
商品A	100	50	150
商品B	200	80	280