WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

F34: 達成基準 1.3.1 及び 達成基準 1.3.2 の不適合事例 - プレーン・テキストのコンテンツで、スペースを用いてテーブルをフォーマットしている

適用(対象)

全てのウェブコンテンツ技術。

これは、次の達成基準に関連する不適合事例である:

解説

この文書は、テキストコンテンツ内でスペース、タブ、改行又は行頭復帰(CR)といった空白文字を使用してテーブルを整形すると、適切に構造を示すことができない不適合事例について述べている。 テーブルがこのような方法で作成されると、セルを見出しセルとして示すことができなくなり、見出しのセルとデータのセルを関連付けできなくなる。又はテーブルの中のセルへ直接誘導することができなくなる。

さらに、支援技術は現在の自然言語の音声読み上げ順序でコンテンツを解釈していく。 視覚的なテーブルにおいて、データをレイアウトするために空白を使用すると、ドキュメントのソースの情報を自然な音声読み上げ順序で提供できなくなってしまう。 このように、支援技術の利用者に対して情報が論理的な音声読み上げ順序で提示されなくなる。

プレーンテキストはテーブルのような複雑な情報を表示するのには適していない。 なぜなら、テーブルの構造は知覚できないからである。テーブルの情報は見た目の書式を整える方法によって表形式の情報の関係を表現するよりは、別のウェブコンテンツ技術を使用するか又は直線的に読上げられるように提示する(プレーンテキストでテーブルの情報を表現するを参照)。

事例

不適合事例1

次の事例では、空白を不適切に使ってメニューを見かけ上のテーブル形式にしている。

コード例:


メニュー
     朝食        昼食       ディナー

月曜   目玉焼き2つ     トマトスープ   ガーデンサラダ
     ベーコン      ハンバーガー   フライドチキン
     トースト      オニオンリング  緑豆
     オートミール    マッシュポテト

火曜   ホットケーキ    野菜スープ    シーザーサラダ
     ソーセージ     ホットドッグ   ミートボールスパゲティ
     オレンジジュース  ポテトサラダ   イタリアンブレッド
               ブラウニー    アイスクリーム

この表は、スクリーンリーダでは次のように解釈され、読上げられる。

  • メニュー

  • 朝食 昼食 ディナー

  • 月曜 目玉焼き2つ トマトスープ ガーデンサラダ

  • ベーコン ハンバーガー フライドチキン

  • トースト オニオンリング 緑豆

  • オートミール クッキー マッシュポテト

このテーブルには、支援技術がこのメニューをテーブルとして特定するための構造がないため、この音声読み上げ順序では意味が伝わらない。 テキストが折り返す、又は固定フォントから可変フォントに変更になる、又はページ内で行が収まらないほど文字サイズを拡大するといった場合、視覚表現で同様の問題が発生すると考えられる。

参考リソース

ここの実装方法に関しては参考リソースが提供されていない。

検証

チェックポイント

  1. 見かけ上のテーブルがドキュメントにある。

  2. 空白文字を使ってデータをテーブル形式にレイアウトしてテーブルが作られている。

判定基準

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。