HTML5のtable要素が表なのかレイアウト目的なのかを示す属性やら要素について調べてみた。

今日(7/24)フィードで、ホットエントリに下記のようなページタイトルを見つけました。

HTML5/テーブル/table要素 レイアウト目的ではないことを示す - TAG index Webサイト

「何を今更!」と思いながらページにアクセスしてみると、なかなか興味深い一文が・・・

table要素に border="1" を追加すると、その表がレイアウト目的ではないことを示すことができます。

「へぇー、そうなんやー」と思いながら、WHATWGtable要素の項目を確認してみたところ、確かに書いてありました。また、WHATWGの仕様書には、table要素が表なのかレイアウト目的なのかを示す属性と要素が示されていたのです(今までちゃんと見てなかったです)。下記がその簡単に日本語訳した一覧の抜粋

レイアウトテーブル

  • role="presentation"の使用
  • 値が「0」のborder属性の使用
  • cellspacing="0"cellpadding="0"の使用

  • caption要素thead要素またはth要素の使用
  • headers属性scope属性の使用
  • 値が「0」以外のborder属性の使用
  • CSSで明示的な境界線の指定

最後の「CSSで明示的な境界線の指定」は、border属性とか使っていたらどうなるのだろうと疑問に思うところもありますが、表なのかレイアウト目的なのかが、これではっきりしますね.....はっきりしたところでそもそもレイアウト目的でtable要素を使う人は例外(HTMLメールなど)をおいては、ほぼ居ないと思いますが・・・スクリーンリーダーなどの支援技術向けということですね。
といっても、このエントリーで書いたことは、Techniques for WCAG 2.0の「F46: 達成基準 1.3.1 の不適合事例 - レイアウトテーブルで、th要素、caption要素、又は空ではないsummary属性を用いている」の内容そのものなので、合わせてF46を読んどくとより理解が増すかと思います。

また、role="presentaion"については、role="presentation"の役割は凄い。【WAI-ARIA】にちょろっと書いてあるので、参考にしていただければと思います。