Webtech Walker

table構造を明確にする属性

tableを構造をより明確にするための属性を紹介してみます。

今回下記のような表を例に挙げて説明したいと思います。

製品名 値段 順位
製品A 10,000円 1位
製品B 300円 2位
製品C 5億円 3位

summary属性

表の目的と構造に関する要約を記入します。例えば、下記のようなtableだと「製品の価格表」などのtableの簡単な説明だけでなく、「製品の価格表。1行目は各行の見出しになる。1列目が商品名、2列目が価格、3列目が順位を示す。」という感じで表の詳しい構造まで説明するのが吉です。

<table summary="製品の価格表。1行目は各行の見出しになる。1列目が商品名、2列目が価格、3列目が順位を示す。">

scope属性

主にthに指定する属性で、そのセルがどちらの方向に対する見出しであるかを明示することができます。横方向(行)に対する見出しの場合は「scope="row"」を指定します。縦方向(列)に対する見出しの場合は「scope="col"」を指定します

<tr>
  <th scope="col">製品名</th>
  <th scope="col">値段</th>
  <th scope="col">順位</th>
</tr>
<tr>
  <th scope="row">製品A</th>
  <td>10,000円</td>
  <td>1位</td>
</tr>
<tr>
  <th scope="row">製品B</th>
  <td>300円</td>
  <td>2位</td>
</tr>
<tr>
  <th scope="row">製品C</th>
  <td>5億円</td>
  <td>3位</td>
</tr>

headers属性

見出しとなるセルにid属性を指定し、対応するセルにidの値をheaders属性で指定します。headers属性の値はスペース区切りで複数指定可能です。

構造が複雑になり、scope属性では構造を示せなくなったときなどにはheaders属性の方が良いです。今回のtableは単純な構造なのでscope属性で十分だと思います。もちろんscope属性とheaders属性を両方用いても大丈夫です。

<tr>
  <th id="product">製品名</th>
  <th id="price">値段</th>
  <th id="number">順位</th>
</tr>
<tr>
  <th id="productA" headers="product">製品A</th>
  <td headers="product productA">10,000円</td>
  <td headers="number productA">1位</td>
</tr>
<tr>
  <th id="productB" headers="product">製品B</th>
  <td headers="product productB">300円</td>
  <td headers="number productB">2位</td>
</tr>
<tr>
  <th id="productC" headers="product">製品C</th>
  <td headers="product productC">5億円</td>
  <td headers="number productC">3位</td>
</tr>

abbr属性

セルの内容の省略形を指定します。音声ブラウザでは見出しを毎回読み上げるので、長い見出しはabbr属性で省略形を制定しておくとよいです。

今回の例だともともと見出しが短いですが、あえて省略するなら下記のような感じでしょうか。

<tr>
  <th abbr="A">製品A</th>
  <td>10,000円</td>
  <td>1位</td>
</tr>
<tr>
  <th abbr="B">製品B</th>
  <td>300円</td>
  <td>2位</td>
</tr>
<tr>
  <th abbr="C">製品C</th>
  <td>5億円</td>
  <td>3位</td>
</tr>

参考: テーブルとアクセシビリティ -- ごく簡単なHTMLの説明

このエントリーをはてなブックマークに追加