thタグのscope属性は何を意味しているのでしょうか?

記事作成日:2009年10月22日

DreamweaverCS4から、表組みをつくるときデフォルトで、thタグにscope属性がはいるようになりました。

thは見出しのセルを表しますが、これに対応するtd(データセル)が列方向(下方向)か行方向(右方向)かを表します。

例えば以下のような表組みがあったとします。

平成19年 平成20年
559847 559513
531643 529971


<table>
<tr>
<td></td>
<th scope="col">平成19年</th>
<th scope="col">平成20年</th>
</tr>
<tr>
<th scope="row">男</th>
<td>559847</td>
<td>559513</td>
</tr>
<tr>
<th scope="row">女</th>
<td>531643</td>
<td>529971</td>
</tr>
</table>

「平成19年」のth(見出し用セル)は、「scope="col"」がはいっており、見出しに対応するtd(データ用セル)は列方向(下方向)ですよいう意味を表しています。「男」のthは、「scope="row"」がはいっており、見出しに対応するtdは行方向(右方向)ですよいう意味を表しています。

ビジュアルウェブブラウザでみれば、thとtdの対応は一目瞭然ですが、音声読み上げブラウザなどのビジュアル環境でない閲覧環境ですとscope属性で指定するとデータ構造がはっきりして、アクセシブルなサイトになります。

このあたりの議論はアクセシビリティといわれる分野です。特に大手企業や自治体のサイトの場合、アクセシビリティを配慮したサイト制作が求められます。『WebアクセシビリティJIS規格完全ガイド』はウェブ担当者、ウェブデザイナー、マークアップアンジニアは必携書です。

Dreamweaverもバージョンがあがることにアクセシビリティ関連のコードが入るようになってきています。

関連記事

↑このページの上に戻る