レイアウトテーブルの使用は禁止されていない。

ちょっと前にTweetしたことなのですが、多くの人がレイアウトテーブルについて勘違いしていると思いましたので、ブログに書こうと思いました。

レイアウトテーブルでサイトを作るということは、フロントエンドエンジニアにとって、あり得ないと思っている人は多いのではないでしょうか。 レイアウトテーブルは、まさに絶対悪、レイアウトテーブルを選択することはキャリアとして終わっている、など、たまに汚い言葉を使ってディスるTweetをたまに見かけます。 これら言われていることに対して言いたいことは分かりますが、そこには大きな勘違いがある、という風に感じています。

なぜかというと、もちろんCSSでやることにこしたことはありませんが、レイアウトテーブルは、仕様として別に禁止されているというわけではないからです。

レイアウトテーブルへの思い込み

少なからずとも、レイアウトテーブルは禁止されているものと意識的でなくとも思っている人はいると思います。

Tableをレイアウトとして使用する。

これを採用するWebデザイナーは、まずいないと言ってもいいくらいCSSの技術取得は普及したと思っています。 HTML+CSSで書くことがWeb標準である。 そして、レイアウトテーブルは標準に準拠していないと私たちは思ってきたのではないでしょうか。

なぜレイアウトテーブルが駄目で、CSSでのレイアウトであるべきか?

これには、ポテンシャルを最大限に活かそうとする5つの理由が挙げられていました。

  • SEO
  • メンテナンス性
  • アクセシビリティ
  • 互換性
  • 相互運用性

このことは、第1回 なぜWeb標準が「ホット」なのかが参考になります。

しかし、一番の理由は、SEOに効果があると言われていたことが一番の理由ではないだろうかと思います。SEOに効果があるので、多くの人がCSSの技術の取得が責務となったようにも感じます。

JIS X 8341-3:2004での要件

そして、もうひとつの理由が、JIS X 8341-3:2004だと思います。JISには、下記のように記述されています。

5.2.d レイアウトテーブルを使用しないことを推奨 表組みの要素をレイアウトのために使わないことが望ましい。

この表現では、まさにレイアウトテーブルが禁止されているものと思ってしまいます。 しかし、文脈をよく読むと禁止とは書かれていません。そのため、誤解を与えるような表現が多かった前規格でしたが、改正されたWCAG 2.0の実装方法集には以下のように記述されています。そして改正版のJISにおいてもレイアウトテーブルの使用は禁止されていないのです。

WCAG 2.0ではレイアウトテーブルの使用を禁じてはいないが、HTMLで定義されているテーブル関聨の要素が持つセマンティックを保持し、プレゼンテーションとコンテンツを分離して記述するコーディング・スタイルを遵守するためにも、CSSによるレイアウトを行うことが推奨される。

書いてあるように、CSSで書くことが推奨されていますが、WCAGでは、レイアウトテーブルを禁止しているわけではありません。 このことを理解する必要はあると思います。

レイアウトテーブルを使う場合の注意点

レイアウトテーブルを使用する場合には、以下のことを知っておく必要があります。このことは非常に大事なので必ず眼を通すようにしてほしいです。

テーブルレイアウトを行う際には、th要素を用いてはならない。この場合、この表はデータを示しているわけではないから、どのセルも行や列の見出しとしてマークアップする必要はない。同様に、レイアウトテーブルを実現するだけのために用いられている表について、追加の説明を提供する必要はない。summary属性は使用するべきではなく、またsummary属性を使って、たとえば「レイアウトテーブル」のような説明を追加するべきではない。このような情報が記述された場合、スクリーンリーダーを使ってコンテンツを利用している利用者に有用な情報が提供されないだけでなく、ナビゲーションの邪魔になる。レイアウトテーブルに値が空のsummary属性を指定することは許容されるが、推奨されない。

このエントリーもご参考ください。WAI-ARIAについてちょこっとだけ書いています。

大事なことは、技術ではなく、ユーザーがコンテンツを利用できることです。 コンテンツを利用できるのであればレイアウトテーブルだとかCSSだとかはどちらでも良いと思っています。

実装方法集にも書かれているとおり、CSSで作成することが推奨されていますが、設計次第では、レイアウトテーブルでもアクセシビリティやメンテナンス性を低下させることなくWebサイトを作成することができます。

案件によっては、 レイアウトテーブルで作成せざるを得ない場合もあるかと思いますが、その場合においては、実装方法集に書かれているようなことの理解があれば問題ないということをすぐに分かると思いますので、レイアウトテーブルを使う場合には、th要素、caption要素、summary属性の使い方に注意してください。