達成基準 1.3.2 の失敗例 － 線形化したときに、意味を成さない HTML のレイアウトテーブルを使用している

例 1: 正しく線形化できないレイアウトテーブル

ある広告では視覚的配置をうまく用いているが、線形化されると意味が変わってしまう。

<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

例 2: 線形化されると意味のあるシーケンスが分割されてしまうレイアウトテーブル

ある美術館の展覧会に関するウェブページでは、リンクの長い一覧を含むナビゲーションバーをページ左側に配置している。そのナビゲーションバーの右側には展覧会に展示される絵の一つが置かれている。その絵の右側には、美術館でその絵の横の壁にみられるであろうプラカードのテキストが置かれている。そのテキストの下には、「Description,」という見出しと、その見出しの下にその絵の説明が置かれている。絵、プラカードのテキスト、説明の見出し、そして絵の説明というのが意味のあるシーケンスとなっている。

ページ中で各要素を配置するためにレイアウトテーブルが用いられている。ナビゲーションバー中の一連のリンクは、最も左の列の異なるセルに分割されている。

<table>
<tr>
	<td><a href="#">Link 1</a></td>
	<td rowspan="20"><img src="img.png" alt="Museum Picture"></td>
	<td rowspan="6"><img src="placard.png" alt="Placard text"></td> 
</tr> 
<tr>
	<td><a href="#">Link 2</a></td>
</tr>
<tr>
	<td><a href="#">Link 3</a></td>
</tr>
<tr>
	<td><a href="#">Link 4</a></td>
</tr>
<tr>
	<td><a href="#">Link 5</a></td>
</tr>
<tr>
	<td><a href="#">Link 6</a></td>
</tr>
<tr>
	<td><a href="#">Link 7</a></td>
	<td rowspan="2"><h2>Image Heading</h2></td> 
</tr> 
<tr>
	<td><a href="#">Link 8</a></td>
</tr>
<tr>
	<td><a href="#">Link 9</a></td>
	<td rowspan="12">Description of the image</td> 
</tr> 
<tr>
	<td><a href="#">Link 10</a></td>
</tr>
 ...
<tr>
	<td><a href="#">Link 20</a></td>
</tr>
</table>

この例の読み順は次のようになってしまうだろう:

• Link 1
• Image
• Placard Text
• Link 2
• Link 3
• Link 4
• Link 5
• Link 6
• Link 7
• Image Heading
• Link 8
• Link 9
• Link 10
• ...
• Link 20

ナビゲーションバーの一連のリンクに絵を説明するコンテンツが割り込んでいるため、スクリーンリーダーは視覚的な順序に対応した意味のあるシーケンスでコンテンツを提示することができない。