table 要素は難しい
1 つ前のエントリーを書いていて、私が悩んだこと。それは、リスト項目のマークアップを dl 要素で行うか、table 要素で行うかということ。
前のエントリーで私は、一対一で対応するデータを列挙しようと思ったのですが、これを表すのに理想的な要素がわからない。縦軸・横軸ともに見出しが必要な訳ではないので、table 要素を使うほどのことはない気がする。かといって dl 要素では対応関係がわかりにくく思える。
結局、悩んだ末に使ったのは table 要素。その理由は扱うデータが氏名で、対応するそれぞれに thead 要素と th 要素で見出しをつけたほうがわかりやすかったから。アクセシビリティの観点と、何よりマークアップの面倒くささからあまり table は使いたくないのですが、情報のわかりやすさを考えれば妥当な選択だったと思っています。
折しも某方面で著名な言葉 言葉 言葉の闇黒日記で、ちょうど table について取り上げられている。そう、table を使うのは決して悪ではない。問題なのは、それを表を表すためではなく、レイアウト目的に使用すること。逆に table を利用しなくても、CSS の見栄えのために何でもかんでも div 要素で囲むようなマークアップ (いわゆる div 厨) をしていれば、それは正しい HTML とは言えません。
けれども、アクセシビリティを考慮しつつ table 要素でマークアップするのは大変。
…音声ブラウザなどを想定すると、このような配慮が必要なのです。私も自分の PC の紹介や過去に販売された PC のスペック一覧に table を使っていますが、これらがそういった要件を 100 パーセント満たしているという確信は持てません。さらに言うなら、どんなに配慮したところで、それを読み上げる UA が対応していなければ結局 table はユーザーのアクセシビリティを下げる原因となってしまいます。そしてこれは何も音声ブラウザに限ったことではありません。テキスト ブラウザにも table を表示できないものは多いですし、画面の狭い携帯電話では物理的に表示できないでしょう。
このように考えると、真のユニバーサルなサイトを実現するには、table 要素のマークアップがいかに難しく大変であるかがわかります。そしてこれを安易にレイアウト目的で使用することが、どれほどユーザーに不便を与えるか…私も以前そのようなテーブル レイアウトを行っていただけに、それがもたらす結果を今思うとぞっとします。
「あなたのそのサイト、あなた以外の人には見えていませんよ?」
…もっと世のほーむぺーじ おーなーの方々には、テーブル レイアウトのリスクと弊害を知ってほしいです。table 要素の使い方は、そんなに簡単ではないのです。
- Posted at 15:56:30 in HTML/CSS
- Comments (0) | TrackBacks (0)
