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

WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

F48: 達成基準 1.3.1 の失敗例 - 表形式の情報をマークアップするために、pre 要素を使用している

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

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

適用 (対象)

HTML 及び XHTML

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

解説

この文書は、表形式の情報をマークアップするために HTML の pre 要素を使用することによって引き起こされる失敗例について説明する。pre 要素は、視覚的なフォーマットだけを保持する。pre 要素を使用して表形式の情報をマークアップすると、利用者ユーザーが画面を見ることができない場合、又は視覚的提示が大きく変化した場合、表のセルとヘッダーとの間で視覚的に暗に示される論理的な関係性が失われる。

その代わりに、HTML には表形式のデータを提示するために用いる table 要素がある。支援技術は、利用者にデータを論理的な方法で提示するために、HTML のテーブルの構造を用いている。pre 要素を使用した際には、支援技術はその構造に関する情報を得ることができない。

事例

失敗例 1: 列の間をタブ区切りで整形したスケジュール

コード例:


 <pre>
 	Monday	Tuesday	Wednesday	Thursday	Friday
 8:00-
 9:00	Meet with Sam				
 9:00-
 10:00			Dr. Williams	Sam again	Leave for San Antonio
 </pre>

失敗例 2: フォーマット済みのテキストを用いて表示した選挙結果

コード例:


 <pre>
   CIRCUIT COURT JUDGE BRANCH 3
                                                  W
                                                   R
                                          M R E     I
                                           A . L     T
                                     M L    R   B     E
                                      I A    Y   E     -
                                       K N        R     I
                                        E G        T     N
                                       -----   -----   -----
0001 TOWN OF ALBION WDS 1-2               22      99       0
0002 TOWN OF BERRY WDS 1-2                52     178       0
0003 TOWN OF BLACK EARTH                  16      49       0
0004 TOWN OF BLOOMING GROVE WDS 1-3       44     125       0
0005 TOWN OF BLUE MOUNDS                  33     117       0
0006 TOWN OF BRISTOL WDS 1-3             139     639       1
0007 TOWN OF BURKE WDS 1-4                80     300       0
0008 TOWN OF CHRISTIANA WDS 1-2           22      50       0
 </pre>

参考リソース

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

検証

手順

  1. pre 要素が使われているかどうかを確認する。

  2. pre 要素が出現するたびに、囲まれた情報が表形式であるかどうかを確認する。

期待される結果