<html xmlns:un="http://usablenet.com/namespaces/508_rules" xmlns:saxon="http://icl.com/saxon">
   <link rel="stylesheet" href="josh.css">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
      <title>Detailed View for rule: 見た目のためにデータテーブルのマークアップを使用していませんか？</title>
      <!--
  508/W3C Accessibility Suite OEM V2 for Macromedia Dreamweaver
  (C) Copyright 2001-2005 UsableNet Inc. All rights reserved.
  -->
   </head>
   <body bgcolor="#ffffff">
      <div id="説明">
         <table cellpadding="0" cellspacing="0" border="0" class="main">
            <tr>
               <td valign="top" class="name" style="background-color:#dcdcdc;padding:3px;">見た目のためにデータテーブルのマークアップを使用していませんか？</td>
            </tr>
            <tr>
               <td colspan="2" class="divider"><img src="dwres:18084" height="1"></td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="requirements" style="text-align:right;">WAI / WCAG 1.0 優先度2 チェックポイント 5.4</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>概要</b><br>
                  
                  <p>Webページに、ページのレイアウトではなく、表形式の情報を提供するために使われていると思われるテーブルがあります（"表形式の情報" というのは、テーブルの二次元のマス目を用いて、テーブルの各セルにあるデータ間の論理的な関係を表現しているものを指します。</p>
                  
                  <p>そのテーブルが実際に表形式の情報を提供していることを確認してください。</p>
                  
                  <p>もし、そのテーブルが情報間の相互の関係を示しているのではなく、単に画面上にグリッドを置くために使われているのであれば、このWebページはこのテスト項目をパスできません。</p>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>チェック方法</b>
                  
                  <p>テーブルおよびコンテンツを調べて、そのテーブルが表形式の情報を提供するために使われているかどうかを確認してください。</p>
                  
                  <p>もしそのテーブルがレイアウトする目的だけで使われているならば、見た目の表現のためにcaption、th、thead、tfootなどのタグを使うべきではありません。</p>
                  
                  <p>caption、thead、そしてtfootを削除して、すべてのth要素をtd要素に置き換えてください。その上で、必要なフォーマットのプロパティを指定したCSSのclass（例えば、"font-weight: bold; text-align:
                     center;"）を定義して、そのclass指定をth要素から置き換えたtd要素に追加してください。
                  </p>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>解説</b><br>
                  
                  <p>th要素のようなマークアップを見た目の表現のために用いることは、アクセシビリティの低下につながります。実際に、音声ブラウザのような支援技術は、ユーザーがテーブル内を読み上げさせるときにはth要素のコンテンツを利用しています。ユーザーがテーブル内のあるセルを読み上げさせるときには、音声ブラウザは必ず関連付けられている見出しセル（th要素でマークアップされているセル）をそのセルと合わせて読み上げます。これにより、ユーザーは、現在位置のデータセルと見出しセルの関係を理解することができるのです。</p>
                  
                  <p>しかしながら、もし、th要素が見た目の表現のためだけに使われていると、音声ブラウザのユーザーにはその相互関係がとても混沌としたものに聞こえて混乱してしまうでしょう。</p>
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>