table のアクセシビリティを向上させる

Category : XHTML/CSS

アクセシビリティをもう少しよくしよう，と思いながら，かつてコーディングしたものを手直ししているのですが，table をめぐってちょっと思ったことを。

横幅もうまく収まりそうだし，スクロールを少なくするという意味もあって，こんな表にしていました。

しかし，今回は次のようにしてみました。

ウェブページを読み上げソフトで利用される方のことを想像してみました。音声ブラウザなどは，特別な操作をしなければ，線形的に（ソースに書かれた順に）テキストを読み上げていきます。

上の表は
「間取り，2LDK，1LDK，タイプ，A，B，C，D，家賃月，165000円，155000円，120000円，108000円」
と読まれそうですね。

たとえば，「120000円」を聞いたとき，これがどんな部屋の家賃なのか，ちょっと分かりにくく感じます。

下の表だと
「間取り，タイプ，家賃月，2LDK，A，165000円，2LDK，B，155000円，1LDK，C，120000円，1LDK，D，108000円」
と読まれそうです。

部屋の間取りとタイプのすぐ後に，家賃が読み上げられるので，対応がはっきりします。

colspan，rowspan属性でセルを連結させるのも，注意したほうがよいかもしれません。行ごとにセルの数が変わると，対応が分かりにくくなります。

同じ2LDKの賃貸マンションの3つの物件を比較したい，というふうなときはどうでしょう。

	家賃（月）	最寄り駅	駅までの距離	築年月	ペット
物件1	165,000円	JR中央線○○駅	徒歩5分	2002年4月	可
物件2	143,000円	京王線○○駅	徒歩20分	2005年8月	可
物件3	255,000円	JR山手線○○駅	徒歩3分	2007年9月	不可