ページ制作のアクセシビリティ指針
優先度1



解説

表(table)はデータを分かりやすく視覚化するためには効果的ですが、音声ブラウザ等の情報を一覧することが困難な環境では、情報を把握し理解することが難しくなります。
データのための表を作成する場合、構造を示す要素や属性を正しく指定し(特にHTML4.01以降のHTML (XHTML)で規定された、アクセシビリティを向上させるための各種の要素や属性)分かりやすくします。


実例

  • table要素にsummary属性で要約とテーブルの構成を記述します。
  • セルの結合は最小限とし、できるだけシンプルな構成とします。
  • caption要素でキャプションを指定します。
  • 見出しセルはtd要素でなくth要素を用いてマークアップし、各データセルと見出しセルとを関連付けるために、th要素のscope属性、あるいはth要素のid属性とtd要素のheaders属性とでそれぞれの関連付けをマークアップします。
  • th要素には (見出しセルの内容が長い場合は) abbr属性で省略形を示します。
データのための表のイメージ。横軸に定期預金の種類、縦軸に期間を1、2、3、6ヵ月というように記載しています。データセルの中には金利が配置され、たとえば「大口定期の1ヵ月の金利は0.020%である」ことがわかるようになっています。

悪い例:

summary,caption,th等が正しく指定されていません。

<table>
...<tr>
<td>スーパー定期(300万円未満の標準金利)</td>
<td>スーパー定期300(300万円以上の標準金利)</td>...
</tr><tr>
<td>1ヵ月</td>
<td>0.020%</td> ...
</tr>
</table>
	

良い例:

summary,caption,thが正しく指定されてます。

<table  summary="定期預金の各商品毎、期間毎の金利の一覧表。
列毎に商品、行毎に期間を示しています。">
<caption>定期預金金利一覧表</caption>
...<tr>
<th abbr="スーパー定期" scope="col">スーパー定期(300万円未満の標準金利)</th>
<td abbr="スーパー定期300" scope="col">スーパー定期300(300万円以上の標準金利) </td>...
</tr><tr>
<th>1ヵ月</th>
<td>0.020%</td>...
</tr>
</table>
	

参考:

音声ブラウザの設定画面のイメージ。テーブル見出しの読み上げ設定を行う部分。列の見出しを読むかどうか、行の見出しを読むかどうかを指定できるようになっています。 音声ブラウザの中には、表の見出しがth要素でマークアップされていると、セルを読み上げる際にセルの属する列(または行)の見出しをあわせて読み上げるものがあります。
この例では、「スーパー定期 1ヵ月 0.020%」などと読み上げます。



当行における特記事項:

特に商品詳細の説明等、構造が複雑で情報量の多い表。金利やレートを説明する表等。



関連するJISの項目

5.2 c (必須)




アクセシビリティガイドライン トップ

このページの先頭へ戻る