ナビゲーションをスキップ

5.テーブル

●  該当するタグ : <TABLE>

  本来の目的とは別に、レイアウトの手段として普及したテーブル機能ですが、使用するにあたっては、ちょっとした注意が必要です。 以下、レイアウトに使用する場合と、本来の「表」として使用する場合とに分けて、注意点を解説します。


1.レイアウトにテーブルを利用する場合

  単に「表示位置の調整」程度に利用するのであれば、特に大きな問題点は見うけられませんが、文章の段組みやセルの結合などを多用し、構造が複雑化されたテーブルは、読み上げの順序が不自然になり、内容がわかりにくくなってしまう場合があります。
テーブルの読み上げは、セル単位で、ソースに記述された順番に読み上げられる」ということに注意をして下さい。

【悪い例】

今週のニュース
コラム
(タイトル)
記事1-タイトル
記事2-タイトル
記事1の本文


記事2の本文


コラム
(本文)
※ ショートメッセージ
記事3-タイトル
記事4-タイトル
記事3の本文


記事4の本文



  この例では、テーブルを使って、各記事をチャート風?に配置しています。
テーブル構造がわかりやすいよう、セルの枠線を表示してみましょう。

今週のニュース
コラム
(タイトル)
記事1-タイトル
記事2-タイトル
記事1の本文


記事2の本文


コラム
(本文)
※ ショートメッセージ
記事3-タイトル
記事4-タイトル
記事3の本文


記事4の本文



この場合、読み上げ順序は以下のようになります。

今週のニュース, コラム(タイトル),
記事1-タイトル, 記事2-タイトル,
記事1の本文, 記事2の本文, コラム(本文),
※ショートメッセージ, 記事3-タイトル, 記事4-タイトル,
記事3の本文, 記事4の本文

このように、音声で聞くと非常にわかりにくいページになってしまいます。


  また、テーブルを右寄せして文字などを左に流しこむ場合も注意が必要です。
画面上は、左に流しこまれた文字が先に目に入るよう設計されていても、読み上げの際は、テーブルの中身の方が先に読み上げられてしまいます。

【例】

〔 出発スケジュール 〕

  7時30分  

・ 集合時間 →


  8時20分  

・ 出発時間 →


※ 遅れないよう注意して下さい。

この例では、「7時30分」,「8時20分」の部分をテーブルを使って右寄せし、
下の文字(「集合時間→」,「「出発時間→」)を各々左側に流し込んでいます。

この場合、読み上げ順序は以下のようになります。

〔 出発スケジュール 〕, 7時30分, 集合時間→, 8時20分,
出発時間→, ※ 遅れないよう注意して下さい。

  もし、レイアウトにテーブルを利用する場合は、見た目による視覚的な判断だけでなく、ソース上、どのような構造で形成されているかについても注意する必要があるでしょう。


2.本来の「表」として使用する場合

  例えば「価格表」などのように、本来の「表」として用いる場合は、次の点に注意をして下さい。

  1. 表の開始時には、必ず「表題」を宣言して、表が始まることを利用者が認識出来るようにして下さい。

      音声ブラウザは、表の中身をセル単位で、ただ左上から右下へと、順次 読み上げていくだけですので、現在、表の中身を読み上げているということを利用者が認識していないと、唐突に言葉が列挙されていくようにしか聞こえません。
    また、ホームページ・リーダーには、「テーブルナビゲーションモード」という機能が備わっていますので、表であることが認識できれば、複雑な表でもセル単位で上下左右に自由に移動して読み上げる事も可能です。
    表の始めに「価格表」「機能比較表」などというように、表題を明示するようにして下さい。

  2. セルの結合は、必要最小限にして下さい。

      隣接するセルを結合することによって、視覚的にすっきりした印象を与えることは期待できますが、音声を頼りに表中のセル構成を理解する場合、それが支障となることは 容易に推測できると思います。
    特に複雑に入り組んだ「セルの結合」は、しない方が良いでしょう。

【良い例】
商品価格表
商品名 標準価格 会員割引価格
商品A 15,000円 12,000円
商品B 20,000円 16,000円
商品C 20,000円 16,000円
商品D 8,000円 7,000円
商品E 5,000円 5,000円


【悪い例】
商品名 標準価格 会員割引価格
商品A 15,000円 12,000円
商品B 20,000円 16,000円
商品C
商品D 8,000円 7,000円
商品E 5,000円



「4.イメージマップ」へ戻る 「7つのポイント」目次へ 「6.フレーム」へ進む


*Copyright(C) Hiro Web Design Office