<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.3</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ページに、レイアウト目的で使用されていると思われるテーブル（すなわち、caption、thead、th、およびtfoot要素のないテーブル）が少なくとも1つあります。</p>
                  
                  <p>テーブルがリニアライズ（線形化）されたときに、そのコンテンツが音声読み上げソフトで意図した通りの順序で読み上げられて、意味が通じるようにしなければなりません。</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>リニアライズされたときに、Webページにあるテーブルでレイアウトされたコンテンツが、正しい順序で読み上げられることを確認してください。考え方としては簡単です：単にすべてのタグを外してしまったときのことを想像すればよいのです。</p>
                  
                  <p>また、1枚の紙を用意して、そのWebページ上でその紙を下げていきながら、上から順に1行ずつチェックしていくことで問題の有無が発見できることもあります。</p>
                  
                  <p>表形式でデータを提供するテーブルに関しては、ここで述べているようにリニアライズする必要はありません。いわゆるデータテーブルは、適切なマークアップ（th要素、scope属性、axia要素、idおよびheaders属性など）によってアクセシブルにしなければなりません。この拡張機能には、WCAG
                     1.0 や508条のガイドラインに沿ってデータテーブルをチェックする項目が用意されています。
                  </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>アクセシビリティがWebページのデザイン・テンプレートが決まって完成した後に初めて考えられたときには、しばしばそのWebページのコンテンツをレイアウトしているテーブルの構造が、ノングラフィカルなブラウザでは正しく機能しないことがあります。</p>
                  
                  <p>最もよくある失敗は、情報を(X)HTMLのテーブルで1行ずつレイアウトし忘れてしまうことです。</p>
                  
                  <p>ノングラフィカルなブラウザは、テーブルのコンテンツを1行ずつ上から順番に表示したり読み上げたりします。たとえ、見た目では列ごとに順番に読み上げるように見えるレイアウトだったとしてもです。</p>
                  
                  <p>以下の例を考えてみてください（
                     <strong>&amp;w3c_html_tech;</strong>
                     [&amp;url_w3c_html_tech;#tables-layout]
                     より）:
                  </p>
                  
                  <blockquote>
                     
                     <p>... もしテーブルが画面上でこのようにレンダリングされた場合：</p>
                     <pre>
今朝の降水確率は30％    ウィスコンシン大学の授業は
ですが、週末には雨は    9月3日に再開する。
やむでしょう。
</pre>
                     <p>スクリーンリーダーは以下のように読むことがある：</p>
                     <pre>
今朝の降水確率は30％ウィスコンシン大学の授業は
ですが、週末には雨は9月3日に再開する。
やむでしょう。
</pre>
                     </blockquote>
                  
                  <p>
                     <strong>リニアライズ</strong>というのは、テーブルのような二次元の構造を、一次元の構造に変換する処理のことです。これは、あらゆる音声ブラウザあるいはスクリーンリーダーがWebページのコンテンツを音声に変換するために行う処理です。
                  </p>
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>