表に概要を追加してみましょう。
概要を追加するには、summary属性を使います。
summary属性とは
summary属性とは、表のおおまかな概要や内容を説明するための要素です。こちらを追加することにより、作成した表が何について説明されているのかを検索エンジンやブラウザなどに伝えることができます。
また、ハンディキャップのある方でも表の内容を把握できるように、音声読み上げや点字に利用されたりもします。
どんな方にでも快適にホームページを見てもらうのは大事なことです。使い勝手の良いホームページにするためにも、ぜひ追加しておきましょう。
summary属性を追加する
それでは、これまでの表にsummary属性を追加してみましょう。
表の概要は、「学校の時間割」とします。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>表の作成</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<table class="tableborder" summary="学校の時間割">
<caption>時間割</caption>
<tr>
<th>時間</th>
<th>教科</th>
<th>担任</th>
<th>場所</th>
</tr>
<tr>
<td>一時間目</td>
<td>国語</td>
<td>西田</td>
<td rowspan="2">第1教室</td>
</tr>
<tr>
<td>二時間目</td>
<td>数学</td>
<td>入部</td>
</tr>
<tr>
<td>三時間目</td>
<td>社会</td>
<td>野田</td>
<td>第2教室</td>
</tr>
<tr>
<td colspan="4">昼休み</td>
</tr>
</table>
summary属性を追加してブラウザで確認しても、なにも表示されません。
しかし、「音声ブラウザ」など、専用ブラウザで見ている場合、特定の操作をすることによりsummary属性が読み上げられます。
ホームページは世界中から、様々な人がアクセスしています。
なるべく、どんな環境でも快適に見ることのできるホームページを作るようにしましょう。
覚えておきたいポイント
使いやすいホームページを目指そう
必ずsummary属性を付ける必要はありませんが、音声ブラウザに対応したりと付けておいた方が親切です。
また、Googleなどの検索エンジンクローラーもsummaryを認識してくれます。
