WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

F49: 達成基準 1.3.2 の失敗例 - リニアライズした際に、意味の通じない HTML のレイアウトテーブルを使用している

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

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

HTML 及び XHTML

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

ユーザエージェント及び支援技術によるサポート

F49 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

WCAG 2.0 はレイアウトテーブルの使用を禁止してはいないが、HTML の table 要素に定義されたセマンティックな意味を維持するため、また構造を表現から分離するコーディング上の慣習に従うためにも、CSS に基づくレイアウトを推奨する。それでもレイアウトテーブルを用いる場合には、コンテンツを線形化しても意味が通るようにすることが重要である。

この失敗例は、コンテンツの視覚的配置を制御するために使用されるHTMLテーブルが正しく「線形化(リニアライズ)」されないことによって、提示を通じて伝えられる意味のあるコンテンツの順序が失われた場合に発生する。テーブルは、横及び縦の 2 つの視覚的な次元でコンテンツを提示する。しかし、スクリーンリーダーは、この 2 次元コンテンツを最初の行の最初のセルから最後の行の最後のセルまで、ソース内のコンテンツの線形的順序で提示する。スクリーンリーダーは、上から下にテーブルを読み上げ、次の行に移動する前に各行の内容全体を読み上げる。セル内にネストされたテーブルのすべての内容を含む、各行の各セルのすべての内容が読み上げられる。これは線形化と呼ばれる。

あるウェブページが 22 行 9 列のテーブルによってレイアウトされているとしよう。スクリーンリーダーは最初に 1 行目の第 1 セル、続いて第 2、第 3、第 4と第 9セルまで読み上げる。しかし、いずれかのセルがネストされたテーブルを含む場合、スクリーンリーダーはネストされたテーブルのすべての内容を、元の (外側の) テーブルの次のセルよりも先に読み上げる。 たとえば 6 行目 3 列のセルに、5 行 6 列のテーブルが含まれる場合、含まれたテーブルのすべてのセルが、元の (外側の) テーブルの 6 行目 4 列のセルよりも先に読み上げられる。その結果、視覚的表現によって伝えられている意味のある順序がスクリーンリーダーによる読み上げでは知覚できないかもしれない。

事例

失敗例 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

訳注:本来は「XYZ mountaineering XYZ gets you to the top!」となるべきである

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

ある美術館の展覧会に関するウェブページでは、リンクの長い一覧を含むナビゲーションバーをページ左側に配置している。そのナビゲーションバーの右側には展覧会に展示される絵の一つが置かれている。その絵の右側には、美術館でその絵の横の壁にみられるであろうプラカードのテキストが置かれている。そのテキストの下には、「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

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

参考リソース

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

検証

チェックポイント

  1. 以下のいずれかの方法によってコンテンツを線形化する:

    • コンテンツをソースコード中の順序で表示する

    • コンテンツを囲むテーブルのマークアップを除去する

  2. 線形化した読み上げ順序が、表現によって伝えられている意味のある順序と合致する

判定基準