GTM-MML4VXJ
Skip to main content
  1. ホーム >
  2. 企業情報 >
  3. 事業方針 >
  4. 技術・研究開発・デザイン >
  5. デザイン >
  6. ユニバーサルデザイン >
  7. 7.1.3.1 情報及び関係性に関する達成基準:テーブル

7.1.3.1 情報及び関係性に関する達成基準:テーブル

表現を通じて伝達されている情報、構造及び関係性は、プログラムが解釈可能でなければならない。プログラムが解釈可能にすることができないウェブコンテンツ技術を用いる場合は、それらはテキストで提供されていなけれfばならない。

引用元:JIS X 8341-3:2010「高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第3部:ウェブコンテンツ」

解説

HTMLでは、「表現を通じて伝達されている情報、構造及び関係性」を適切な要素や属性を用いてマークアップして、「プログラムが解釈可能」にしなければなりません。

「プログラムが解釈可能」というのは、ブラウザや支援技術(例:スクリーンリーダー)が、ソースコードからコンテンツの「情報、構造及び関係性」を解釈できることを指します。HTMLの場合には、仕様で定められている要素や属性を用いてマークアップすることによって、見た目などの表現に関係なく、ブラウザや支援技術(例:スクリーンリーダー)がコンテンツの「情報、構造及び関係性」を解釈することが可能になります。

本達成基準では、ウェブページにデータテーブル(表)がある場合には、その見た目だけでなく、ソースコードで次のような「情報、構造及び関係性」をマークアップすることが求められています。

  • データテーブル:table要素、tr要素、th要素(見出しセル)およびtd要素(データセル)
  • 表題:caption要素
  • 概要:summary属性
  • 見出しセルとデータセルの関係:scope属性、またはid属性とheaders属性

情報をデータテーブルで提供する際には、table要素を子要素のtr要素、th要素およびtd要素とあわせて用いることによって、データテーブルの「構造」やセル間の論理的な「関係性」を「プログラムが解釈可能」にします。

データテーブルの見出しセルにはth要素、データセルにはtd要素を用いますが、td要素でマークアップしてあるデータセルが行見出しまたは列見出しとしても機能する場合には、scope属性を使用することによって、その他のデータセルと関連付けることができます。scope属性は、そのセルが行、列、行グループ、列グループのどの見出しであるかを特定するために指定します。なお、1行目や1列目に見出しセルがある単純なテーブルについては、scope属性を指定せずに、見出しセルをth要素でマークアップするだけで十分です。

また、結合されたセルがあるなどしてデータテーブルの構造が複雑な場合には、見出しセルとデータセルを関連付けるためにid属性とheaders属性を用います。詳細は、『WCAG 2.0 実装方法集』の「H43: id属性及びheaders属性を用いて、データテーブルのデータセルを見出しセルと関連付ける」を参照してください。

その他にも、表題となるテキストがある場合には、caption要素を用いてマークアップします。これにより、表題のテキストとデータテーブルとの「関係性」を見た目だけでなく「プログラムが解釈可能」にすることができます。さらに、summary属性を用いて、データテーブルの概要を提供することができますが、caption要素とsummary属性を両方とも指定する場合は、caption要素の表題とsummary属性の概要の内容が重複しないようにする必要があります。

なお、レイアウトだけの目的でテーブルを用いる際には、次の要素や属性を用いると、本達成基準に不適合となりますので注意してください。

  • th要素
  • caption要素
  • summary属性
  • scope属性
  • headers属性

事例と実装

良い例:データテーブル

スクリーンショット:表題のあるデータテーブル

表形式の情報をtable要素を子要素のtr要素、th要素およびtd要素を用いて、データテーブルとして提供する。また、表題のテキストがある場合はcaption要素でマークアップする。

ソースコード例

< table >
< caption >表1. 年代別利用率の推移< /caption >
< tr >
< th >< /th >
< th >20~29歳< /th >
< th >30~39歳< /th >
< th >40~49歳< /th >
< th >50歳以上< /th >
< /tr >
< tr >
< th >2010年< /th >
< td >96.5%< /td >
< td >95.1%< /td >
< td >92.0%< /td >
< td >82.2%< /td >
< /tr >
< tr >
< th >2011年< /th >
< td >96.8%< /td >
< td >95.7%< /td >
< td >94.2%< /td >
< td >85.3%< /td >
< /tr >
< tr >
< th >2012年< /th >
< td >97.4%< /td >
< td >96.3%< /td >
< td >95.1%< /td >
< td >86.3%< /td >
< /tr >
< /table >

参考情報

関連する達成基準

関連する達成基準はありません。