視覚障害者のための属性

サンプルはHTML4.01仕様書(W3C 1999/12/24)に基づくものです。音声ブラウザや点字ブラウザによる動作確認は行っておりません。加えて、表示例は分かりやすくする為にスタイルシートで編集を行っています。

summary="文章"　音声や点字出力のための、表の概要を記述

table (H4- N6-)

summary="文章"　-- 音声や点字出力のための、表の概要を記述 --

表示例

児童のシリアル消費
名前	消費量	シリアルの種類	一緒に食べるものは？
さとし	120g	加糖	牛乳砂糖バナナ
ほのか	70g	無糖	牛乳レーズン果物

ソース


<table border="1"

       summary="この表は児童のシリアル消費について、

       一日あたり何グラム食べるか、

       種類は何か（加糖か無糖か）、

       一緒に食べるものは何かを示しています。">

<caption>児童のシリアル消費</caption>

<tr>

  <th scope="col">名前

  <th scope="col" abbr="量">消費量

  <th scope="col" abbr="種類">シリアルの種類

  <th scope="col" abbr="添え物">一緒に食べるものは？

<tr><td>さとし<td>120g<td>加糖<td>牛乳 砂糖 バナナ

<tr><td>ほのか<td>70g<td>無糖<td>牛乳 レーズン 果物 

</table>

読み上げの例

表題：	児童のシリアル消費
概要：	この表は児童のシリアル消費について、一日あたり何グラム食べるか、種類は何か（加糖か無糖か）、一緒に食べるものは何かを示しています。
名前：	さとし、量： 120g、種類：加糖、添え物：牛乳砂糖バナナ
名前：	ほのか、量： 70g、種類：無糖、添え物：牛乳レーズン果物

abbr="文章"　ヘッダセルの略記

th td (H4-)

abbr属性は、scope属性およびheaders属性による見出し情報(ヘッダセル)を短く省略化する属性です。音声的に長くなる見出し情報(ヘッダセル)が繰り返し読み上げられることのわずらわしさを回避するのに用います。

abbr="文章"　-- ヘッダセルの略記 --

表示例

児童のシリアル消費
名前	消費量	シリアルの種類	一緒に食べるものは？
さとし	120g	加糖	牛乳砂糖バナナ
ほのか	70g	無糖	牛乳レーズン果物

ソース


<table border="1">

<caption>児童のシリアル消費</caption>

<tr>

  <th scope="col">名前

  <th scope="col" abbr="量">消費量

  <th scope="col" abbr="種類">シリアルの種類

  <th scope="col" abbr="添え物">一緒に食べるものは？

<tr><td>さとし<td>120g<td>加糖<td>牛乳 砂糖 バナナ

<tr><td>ほのか<td>70g<td>無糖<td>牛乳 レーズン 果物

</table>

読み上げの例

表題：	児童のシリアル消費
名前：	さとし、量： 120g、種類：加糖、添え物：牛乳砂糖バナナ
名前：	ほのか、量： 70g、種類：無糖、添え物：牛乳レーズン果物

scope="範囲"　ヘッダセルの範囲

th td (H4-)

scope属性およびheaders属性は、視覚障害者向けの音声ブラウザや点字ブラウザにおいて、データに対する見出し情報(ヘッダセル)を提供する属性です。scope属性では、見出し情報(ヘッダセル)の縦または横の範囲指定を行います。

scope="row"　-- ヘッダセルの範囲：このヘッダセルから右側すべての横列 --

ヘッダセル	データセル	データセル
ヘッダセル	データセル	データセル
ヘッダセル	データセル	データセル


<table border="1">

<tr>

  <td scope="row">ヘッダセル

  <td>データセル

  <td>データセル

<tr>

  <td scope="row">ヘッダセル

  <td>データセル

  <td>データセル

<tr>

  <td scope="row">ヘッダセル

  <td>データセル

  <td>データセル

</table>

scope="col"　-- ヘッダセルの範囲：このヘッダセルから下側すべての縦欄 --

ヘッダセル	ヘッダセル	ヘッダセル
データセル	データセル	データセル
データセル	データセル	データセル


<table border="1">

<tr>

  <td scope="col">ヘッダセル

  <td scope="col">ヘッダセル

  <td scope="col">ヘッダセル

<tr>

  <td>データセル

  <td>データセル

  <td>データセル

<tr>

  <td>データセル

  <td>データセル

  <td>データセル

</table>

scope="rowgroup"　-- ヘッダセルの範囲：このヘッダセルから右側すべての横列グループ --

ヘッダセル	データセル	データセル
	データセル	データセル
	データセル	データセル


<table border="1">

<tr>

  <td rowspan="3" scope="rowgroup">ヘッダセル

  <td>データセル

  <td>データセル

<tr>

  <td>データセル

  <td>データセル

<tr>

  <td>データセル

  <td>データセル

</table>

scope="colgroup"　-- ヘッダセルの範囲：このヘッダセルから下側すべての縦欄グループ --

ヘッダセル
データセル	データセル	データセル
データセル	データセル	データセル


<table border="1">

<tr>

  <td colspan="3" scope="colgroup">ヘッダセル

<tr>

  <td>データセル

  <td>データセル

  <td>データセル

<tr>

  <td>データセル

  <td>データセル

  <td>データセル

</table>

headers="参照IDのリスト"　参照ヘッダセルのIDリスト

th td (H4-)

scope属性およびheaders属性は、視覚障害者向けの音声ブラウザや点字ブラウザにおいて、データに対する見出し情報(ヘッダセル)を提供する属性です。headers属性は、データに関連する見出し情報(ヘッダセル)のIDを、半角スペース[ ]区切りのリストで指定します。サンプルは、ヘッダセルIDの縦方向を y 横方向を x とし、N を番号として説明しています。

headers="yN"　-- 参照ヘッダセルのIDリスト：yN --

ヘッダセル	データセル	データセル
ヘッダセル	データセル	データセル
ヘッダセル	データセル	データセル


<table border="1">

<tr>

  <td id="y1">ヘッダセル

  <td headers="y1">データセル

  <td headers="y1">データセル

<tr>

  <td id="y2">ヘッダセル

  <td headers="y2">データセル

  <td headers="y2">データセル

<tr>

  <td id="y3">ヘッダセル

  <td headers="y3">データセル

  <td headers="y3">データセル

</table>

この指定は、scope="row" と同じものになります。

headers="xN"　-- 参照ヘッダセルのIDリスト：xN --

ヘッダセル	ヘッダセル	ヘッダセル
データセル	データセル	データセル
データセル	データセル	データセル


<table border="1">

<tr>

  <td id="x1">ヘッダセル

  <td id="x2">ヘッダセル

  <td id="x3">ヘッダセル

<tr>

  <td headers="x1">データセル

  <td headers="x2">データセル

  <td headers="x3">データセル

<tr>

  <td headers="x1">データセル

  <td headers="x2">データセル

  <td headers="x3">データセル

</table>

この指定は、scope="col" と同じものになります。

headers="yN" グループ　-- 参照ヘッダセルのIDリスト：yN グループ --

ヘッダセル	データセル	データセル
	データセル	データセル
	データセル	データセル


<table border="1">

<tr>

  <td rowspan="3" id="y1">ヘッダセル

  <td headers="y1">データセル

  <td headers="y1">データセル

<tr>

  <td headers="y1">データセル

  <td headers="y1">データセル

<tr>

  <td headers="y1">データセル

  <td headers="y1">データセル

</table>

headers="xN" グループ　-- 参照ヘッダセルのIDリスト：xN グループ --

ヘッダセル
データセル	データセル	データセル
データセル	データセル	データセル


<table border="1">

<tr>

  <td colspan="3" id="x1">ヘッダセル

<tr>

  <td headers="x1">データセル

  <td headers="x1">データセル

  <td headers="x1">データセル

<tr>

  <td headers="x1">データセル

  <td headers="x1">データセル

  <td headers="x1">データセル

</table>

headers="yN xN"　-- 参照ヘッダセルのIDリスト：yN xN --

	ヘッダセル	ヘッダセル	ヘッダセル
ヘッダセル	データセル	データセル	データセル
ヘッダセル	データセル	データセル	データセル
ヘッダセル	データセル	データセル	データセル


<table border="1">

<tr>

  <td><br>

  <td id="x1">ヘッダセル

  <td id="x2">ヘッダセル

  <td id="x3">ヘッダセル

<tr>

  <td id="y1">ヘッダセル

  <td headers="y1 x1">データセル

  <td headers="y1 x2">データセル

  <td headers="y1 x3">データセル

<tr>

  <td id="y2">ヘッダセル

  <td headers="y2 x1">データセル

  <td headers="y2 x2">データセル

  <td headers="y2 x3">データセル

<tr>

  <td id="y3">ヘッダセル

  <td headers="y3 x1">データセル

  <td headers="y3 x2">データセル

  <td headers="y3 x3">データセル

</table>

headers="yN xN" グループ　-- 参照ヘッダセルのIDリスト：yN xN グループ --

	ヘッダセル		ヘッダセル
ヘッダセル	データセル	データセル	データセル
ヘッダセル	データセル	データセル	データセル
ヘッダセル	データセル	データセル	データセル


<table border="1">

<tr>

  <td><br>

  <td colspan="2" id="x1">ヘッダセル

  <td id="x2">ヘッダセル

<tr>

  <td id="y1">ヘッダセル

  <td headers="y1 x1">データセル

  <td headers="y1 y1">データセル

  <td headers="y1 x2">データセル

<tr>

  <td rowspan="2" id="y2">ヘッダセル

  <td headers="y2 x1">データセル

  <td headers="y2 x1">データセル

  <td headers="y2 x2">データセル

<tr>

  <td headers="y2 x1">データセル

  <td headers="y2 x1">データセル

  <td headers="y2 x2">データセル

</table>

axis="文章のリスト"　ヘッダセルの分類名

axis属性では、scope属性およびheaders属性による見出し情報(ヘッダセル)に対して、コンマ[,]区切りの分類名を付けます。この分類名をもとに、音声ブラウザ等はユーザーの問い合わせに対する応答を行うことができます。

HTML4.01仕様書(W3C 1999/12/24)には、ユーザーエージェント(ブラウザ)に対して「応答に関しての規定は特に定めない」との記述があります。以下は、HTML4.01仕様書に基づくaxis属性の使用例です。

axis="文章のリスト"　-- ヘッダセルの分類名 --

表示例

旅行の費用
	食費	ホテル代	交通費	横計
東京
2002/10/15	\1,500	\10,000	\1,000	\12,500
2002/10/16	\3,000	\15,000	\3,000	\21,000
小計	\4,500	\25,000	\4,000	\33,500
大阪
2002/10/17	\2,500	\6,000	\600	\9,100
2002/10/18	\5,000	\12,000	\1,500	\18,500
小計	\7,500	\18,000	\2,100	\27,600
合計	\12,000	\43,000	\6,100	\61,100

ソース


<table border="0" cellpadding="4" cellspacing="0"

summary="この表は、この10月に東京と大阪に旅行した際の支出一覧です。">

<caption>旅行の費用</caption>

<tr>

  <th><br>

  <th id="shi1" axis="支出">食費

  <th id="shi2" axis="支出">ホテル代

  <th id="shi3" axis="支出">交通費

  <td align="center">横計

<tr>

  <th id="ba1" axis="場所">東京

  <td colspan="4"><br>

<tr>

  <td id="hi15" axis="日付">2002/10/15

  <td headers="ba1 shi1 hi15">\1,500

  <td headers="ba1 shi2 hi15">\10,000

  <td headers="ba1 shi3 hi15">\1,000

  <td>\12,500

<tr>

  <td id="hi16" axis="日付">2002/10/16

  <td headers="ba1 shi1 hi16">\3,000

  <td headers="ba1 shi2 hi16">\15,000

  <td headers="ba1 shi3 hi16">\3,000

  <td>\21,000

<tr>

  <td align="center">小計

  <td>\4,500

  <td>\25,000

  <td>\4,000

  <td>\33,500

<tr>

  <th id="ba2" axis="場所">大阪

  <td colspan="4"><br>

<tr>

  <td id="hi17" axis="日付">2002/10/17

  <td headers="ba2 shi1 hi17">\2,500

  <td headers="ba2 shi2 hi17">\6,000

  <td headers="ba2 shi3 hi17">\600

  <td>\9,100

<tr>

  <td id="hi18" axis="日付">2002/10/18

  <td headers="ba2 shi1 hi18">\5,000

  <td headers="ba2 shi2 hi18">\12,000

  <td headers="ba2 shi3 hi18">\1,500

  <td>\18,500

<tr>

  <td align="center">小計

  <td>\7,500

  <td>\18,000

  <td>\2,100

  <td>\27,600

<tr>

  <th>合計

  <td>\12,000

  <td>\43,000

  <td>\6,100

  <td>\61,100

</table>

問い合わせに対する応答例

「東京での食費はいくらだったか？」という問い合わせに対する応答例

例1：

場所：東京。日付: 2002/10/15。支出・食費： \1,500

場所：東京。日付: 2002/10/16。支出・食費： \3,000

例2：

東京、2002/10/15、食費： \1,500

東京、2002/10/16、食費： \3,000

例3：

東京、食費、	2002/10/15： \1,500
	2002/10/16： \3,000

視覚障害者のための属性