HTML 及び XHTML
これは次の達成基準に関する不適合事例である：
初期のスクリーンリーダーは文字通りウェブコンテンツを画面から読み取っていた。そのため、テーブルの一つのセルの内容全体が次のセルより先に読まれることを意図しているようなレイアウトテーブルは問題になっていた。今日のスクリーンリーダーは基礎となっているマークアップを利用して動作するため、一つのセルの内容全体を次のセルより先に読み上げることが可能である。しかしレイアウトのためのテーブルは現在でもコンテンツの自然な読み上げ順序に関する問題を生じさせることがある。
WCAG 2.0はレイアウトテーブルの使用を禁止してはいないが、HTMLのtable要素に定義されたセマンティックな意味を維持するため、また構造を表現から分離するコーディング上の慣習に従うためにも、CSSに基づくレイアウトを推奨する。それでもレイアウトテーブルを用いる場合には、コンテンツを線形化しても意味が通るようにすることが重要である。
ここで述べる不適合事例は、コンテンツの視覚的配置のために使用されるHTMLテーブルによってコンテンツが正しく「線形化（リニアライズ）」されないために、表現によって伝えられている意味のある順序が失われることによって生じる。テーブルはコンテンツを縦横の二つの次元で視覚的に表現する。しかし、スクリーンリーダーはこの2次元のコンテンツを、コンテンツがソースに記述された線形的順序、すなわち1行目の一つ目のセルに始まり最終行の最後のセルで終わるような順序で表現する。スクリーンリーダーはテーブルを上から下に読み上げ、ある行のすべての内容を読み上げてから次の行の内容を読み上げる。それぞれの行のそれぞれのセルのすべての内容が、そのセルに含まれるネストされたテーブルのすべての内容も含めて読み上げられる。これを「線形化」と呼んでいる。
あるウェブページが22行9列のテーブルによってレイアウトされているとしよう。スクリーンリーダーは最初に1行目の第1セル、続いて第2、第3、第4と第9セルまで読み上げる。しかし、いずれかのセルがネストされたテーブルを含む場合、スクリーンリーダーはネストされたテーブルのすべての内容を、元の(外側の)テーブルの次のセルよりも先に読み上げる。 たとえば6行目3列のセルに、5行6列のテーブルが含まれる場合、含まれたテーブルのすべてのセルが、元の(外側の)テーブルの6行目4列のセルよりも先に読み上げられる。その結果、視覚的表現によって伝えられている意味のある順序がスクリーンリーダーによる読み上げでは知覚できないかもしれない。
ある広告では視覚的配置をうまく用いているが、線形化されると意味が変わってしまう。
コード例:
<table>
<tr>
<td ><img src="logo.gif" alt="XYZ mountaineering"></td>
<td rowspan="2" valign="bottom">top!</td>
</tr>
<tr>
<td>XYZ gets you to the</td>
</tr>
</table>このテーブルの読み上げ順序は次のようになってしまうだろう：
XYZ mountaineering top!
XYZ gets you to the
訳注：本来は「XYZ mountaineering XYZ gets you to the top!」となるべきである
ある美術館の展覧会に関するウェブページでは、リンクの長い一覧を含むナビゲーションバーをページ左側に配置している。そのナビゲーションバーの右側には展覧会に展示される絵の一つが置かれている。その絵の右側には、美術館でその絵の横の壁にみられるであろうプラカードのテキストが置かれている。そのテキストの下には、「Description,」という見出しと、その見出しの下にその絵の説明が置かれている。絵、プラカードのテキスト、説明の見出し、そして絵の説明というのが意味のある順序となっている。
ページ中で各要素を配置するためにレイアウトテーブルが用いられている。ナビゲーションバー中の一連のリンクは、最も左の列の異なるセルに分割されている。
コード例:
<table>
<tr>
<td><a href="#">リンク 1</a></td>
<td rowspan="20"><img src="img.png" alt="美術館の絵"></td>
<td rowspan="6"><img src="placard.png" alt="プラカードのテキスト"></td>
</tr>
<tr>
<td><a href="#">リンク 2</a></td>
</tr>
<tr>
<td><a href="#">リンク 3</a></td>
</tr>
<tr>
<td><a href="#">リンク 4</a></td>
</tr>
<tr>
<td><a href="#">リンク 5</a></td>
</tr>
<tr>
<td><a href="#">リンク 6</a></td>
</tr>
<tr>
<td><a href="#">リンク 7</a></td>
<td rowspan="2"><h2>説明の見出し</h2></td>
</tr>
<tr>
<td><a href="#">リンク 8</a></td>
</tr>
<tr>
<td><a href="#">リンク 9</a></td>
<td rowspan="12">Description of the image</td>
</tr>
<tr>
<td><a href="#">リンク 10</a></td>
</tr>
...
<tr>
<td><a href="#">リンク 20</a></td>
</tr>
</table>
この例の読み順は次のようになってしまうだろう：
リンク 1
美術館の絵
プラカードのテキスト
リンク 2
リンク 3
リンク 4
リンク 5
リンク 6
リンク 7
説明の見出し
リンク 8
リンク 9
リンク 10
...
リンク 20
ナビゲーションバーの一連のリンクに絵を説明するコンテンツが割り込んでいるため、スクリーンリーダーは視覚的な順序に対応した意味のある順序でコンテンツを提示することができない。
この不適合事例に関するリソースは、今のところない。
以下のいずれかの方法によってコンテンツを線形化する:
コンテンツをソースコード中の順序で表示する
コンテンツを囲むテーブルのマークアップを除去する
線形化した読み上げ順序が、表現によって伝えられている意味のある順序と合致する
2.を満たしていない場合、この不適合条件が適用され、達成基準に不適合となる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。