<html xmlns:jis="http://www.macromedia.com/jp/JISX83413_rules" xmlns:saxon="http://icl.com/saxon" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
      <link rel="stylesheet" href="josh.css">
      <title>［5.2d］ レイアウトテーブルの音声読み上げ順序をチェックしてください</title>
   </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;">
                      JIS 5.2 d);
                      WCAG 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>
                  
                  <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属性など）によってアクセシブルにしなければなりません。この拡張機能には、JIS
                     X 8341-3、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>
                  
                  <blockquote style="margin:0px 10px 0px 20px;">
                     
                     <p>音声ブラウザは、表を左上から右下に読み上げます。そのため、表の要素や属性をレイアウト目的で使用した場合、作成者が意図しない順序で読み上げる可能性があります。
                        <br>表の要素や属性を、レイアウト目的で使用する場合は、読み上げ順序を考慮してください。
                     </p>
                     
                     <ul>
                        
                        <li>レイアウトは、XHTMLとスタイルシートで行うことが望ましい。
                           <br>（ただし、Netscape Navigator 4.x など、古いバージョンのブラウザでは、正しく表示されないため、注意すること。）
                        </li>
                        
                        <li>表（テーブル）の要素や属性を使用する場合は、読み上げ順序を考慮すること。
                           <br>（特に、フォームにテーブルを使用する場合は、ラベルとコントロールが対で順番に読み上げられるようにする。） 
                        </li>
                        
                     </ul>
                     
                     <p><cite style="font-style:normal;color:#006400">『富士通ウェブ・アクセシビリティ指針 第2.0版』 © 2004 富士通株式会社</cite></p>
                  </blockquote>
                  
               </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>JIS関連項目</b>
                  
                  <blockquote style="margin:0px 10px 0px 20px;">
                     
                     <p><strong>5.2 構造及び表示スタイル
                           <br>d)</strong> 表組みの要素をレイアウトのために使わないことが望ましい。
                        <br><strong>参考</strong> 本来，表組みするためのHTML のtable 要素をレイアウトに使用すると，ソースをその記述順に読み上げる音声ブラウザなどでは，意図しない順序で読み上げる可能性がある。特に，セルを結合したり，複雑な入れ子構造にすると顕著である。
                     </p>
                     
                     <p><cite style="font-style:normal;color:#006400">JIS X 8341-3:2004『高齢者・障害者等配慮設計指針－情報機器における機器，ソフトウェア及びサービス－第三部：ウェブコンテンツ』（© 財団法人 日本規格協会）</cite></p>
                     
                  </blockquote>
                  
                  
                  <blockquote style="margin:0px 10px 0px 20px;">
                     <p><strong>5.1 規格及び仕様
                           <br>a)</strong> ウェブコンテンツは，関連する技術の規格及び仕様に則り，かつ，それらの文法に従って作成しなければならない。
                     </p>
                  </blockquote>
                  
               </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ページのデザイン・テンプレートが決まって完成した後になって、アクセシビリティが初めて考慮されたときには、そのWebページのコンテンツをレイアウトしているテーブルの構造が、ノングラフィカルなブラウザでは正しく機能しないことがよくあります。</p>
                  
                  <p>最もよくある失敗は、情報を(X)HTMLのテーブルで1行ずつレイアウトし忘れてしまうことです。</p>
                  
                  <p>ノングラフィカルなブラウザは、テーブルのコンテンツを上から順番に1行ずつ左から右へと表示したり読み上げたりします。たとえ、見た目では列ごとの順番に読み上げるように見えるレイアウトだったとしてもです。</p>
                  
                  <p>以下の例を考えてみてください（
                     <a>&amp;url_w3c_html_tech;#tables-layout&amp;w3c_html_tech;</a>より）:
                  </p>
                  
                  <blockquote>
                     
                     <p>... もしテーブルが画面上でこのようにレンダリングされた場合：</p>
                     <pre>
今朝の降水確率は30％    ウィスコンシン大学の授業は
ですが、週末には雨は    9月3日に再開する。
やむでしょう。
</pre>
                     <p>旧いスクリーンリーダーでは、以下のように読むことがある：</p>
                     <pre>
今朝の降水確率は30％ウィスコンシン大学の授業は
ですが、週末には雨は9月3日に再開する。
やむでしょう。
</pre>
                     </blockquote>
                  
                  <p>
                     <strong>リニアライズ</strong>というのは、テーブルのような二次元の構造を、一次元の構造に変換する処理のことです。これは、あらゆる音声ブラウザあるいはスクリーンリーダーがWebページのコンテンツを音声に変換するために行う処理です。テーブルの各セルの内容を、(X)HTMLのソースコード上に記述されている順序で、上から順に一列で並べると考えてください。
                  </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>JIS X 8341-3について</b>
                  
                  <p>JIS X 8341-3 の内容は、以下のサイトにて規格番号「X8341-3」で検索して、規格票をご覧ください。</p>
                  
                  <ul style="margin:0px 0px 0px 10px;">
                     
                     <li><strong>閲覧</strong>：日本工業標準調査会（JISC）
                        <br>http://www.jisc.go.jp/
                     </li>
                     
                     <li><strong>購入</strong>：日本規格協会（JSA Web Store）
                        <br>http://www.webstore.jsa.or.jp/
                     </li>
                     
                  </ul>
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>