【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集

WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

F34: 達成基準 1.3.1 及び 達成基準 1.3.2 の失敗例 - プレーンテキストのコンテンツでテーブルの書式を整えるために、空白文字を使用している

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

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

これは、次の達成基準に関連する失敗例である:

解説

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

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

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

事例

失敗例 1

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

コード例:


Menu
         Breakfast        Lunch           Dinner
Monday   2 fried eggs    tomato soup     garden salad
         bacon           hamburger       Fried Chicken
         toast           onion rings     green beans
                         Oatmeal cookie  mashed potatoes
Tuesday   Pancakes       vegetable soup  Caesar salad
          sausage        hot dogs        Spaghetti with meatballs
          orange juice   potato salad    Italian bread
                         brownie         ice cream

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

  • Menu

  • Breakfast Lunch Dinner

  • Monday 2 fried eggs tomato soup garden salad

  • bacon hamburger Fried Chicken

  • toast onion rings green beans

  • Oatmeal cookie mashed potatoes

支援技術がテーブルとして特定するための構造がテーブルにないため、この読み上げ順序は意味をなさない。 テキストがリフローする、又はは固定フォントから可変フォントに変更される、又は行がページに収まらなくなるまでサイズを大きくする場合、視覚的提示で同様の問題が発生する。

参考リソース

この達成方法に関する参考リソースはない。

検証

手順

  1. 視覚的に整形されたテーブルのドキュメントを調べる。

  2. テーブルのデータをレイアウトするために空白文字を使ってテーブルが作られているかどうかを確認する。

期待される結果