<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.2c］ 見出しセルをグループ化できませんか？</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 c);
                      WCAG 5.2;
                      508条 (h)
                      
               </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ページに&lt;th&gt;タグのある&lt;table&gt;タグがあり、thead、tfoot、tbody要素がありません。もし、テーブルがデータを見せるために使われていて、複数の行と列の見出しがあるのであれば、thead、tfoot、tbody要素でマークアップすることを検討してください。</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>もし、データを表すのにテーブルを用いていて、データが異なる見出しセルを持つ行単位のセクション（グループ化できる部分）で構成されているのであれば、&lt;thead&gt;、&lt;tfoot&gt;、&lt;tbody&gt;タグを用いて（おそらく、colgroup および col
                     とあわせて）それぞれの行単位のセクションをマークアップしてください。
                  </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>大きすぎる表は一覧性が悪くなります。また、表の入れ子やセルの結合を多用すると、音声ブラウザで意図したとおりに読み上げられないことがあります。</p>
                     
                     <p>音声ブラウザで表を参照した場合、音声ブラウザは、表を左上から右下に 1セルづつ読み上げます。そのため、行や列の関係がわかりにくくなる場合があります。</p>
                     
                     <p>また、表に適切なタグを指定していない場合、音声ブラウザは、各行・各列の見出し項目を読み上げず、表の内容を正しく把握できない場合があります。</p>
                     
                     <ul>
                        
                        <li>セル数の多い大きな表は避け、小さな表にすることが望ましい。</li>
                        
                        <li>音声ブラウザの読み上げ順序を考慮して、テーブルを作成する。</li>
                        
                        <li>行や列の見出し項目名は、&lt;th&gt;タグを使って指定する（ &lt;td&gt;タグを使用しない）。 </li>
                        
                        <li>セルの結合は、必要最小限とし、複雑に入り組んだ表にしないことが望ましい。</li>
                        
                        <li>複雑な表には、scope属性、id属性、headers属性を使用することが望ましい。</li>
                        
                        <li>複雑な表には、テキストによる解説を記述する。</li>
                        
                        <li>数値を表示するときは、視覚的に煩雑にならない範囲で、各セルに単位を記述する。</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>c)</strong> 表は，分かりやすい表題を明示し，できる限り単純な構造にして，適切なマーク付けによってその構造を明示しなければならない。
                        <br><strong>参考</strong> 音声ブラウザなどを利用するとき，構造を規定しないと，読み上げているところが表の中身であることを認識できなかったり，内容を理解できなかったりすることがある。
                     </p>
                     
                     <p><cite style="font-style:normal;color:#006400">JIS X 8341-3: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>解説</b>
                  
                  <p>データテーブルは、縦横の二次元で情報を伝えるのに用いられ、しばしば特定のユーザーにはその内容が理解できないのです。以下のような例を考えてみてください。</p>
                  
                  <ul>
                     
                     <li>テキストブラウザは、複数の行と列を正しく一列に並べることができないことがある。</li>
                     
                     <li>音声ブラウザは、テーブルの内容を連続して読み上げる。</li>
                     
                     <li>点字ピンディスプレイもテーブルを連続してスキャンする</li>
                     
                     <li>（PDAあるいは携帯電話のような）とても小さいディスプレイのブラウザはテーブルの限られた部分しか表示しない</li>
                     
                  </ul>
                  
                  <p>これらすべてのケースにおいて、ユーザーはセルの前後関係（そのデータセルが参照しているのはどの行と列の見出しセルなのか？）を記憶しなければなりません。これは、例えば、テーブルが大きいとき、あるいはユーザーが急いでいるときなどに、必要な情報を探すにはあまりにも無理な要求であり、ユーザーにとっては耐えられないことです。</p>
                  
                  <p>また、こういったシチュエーションでは、ユーザーはテーブルのあるセルから他のセルへ直接移動できないかもしれないことも考慮してください。ユーザーは、あるセルから（例えば、同じ行の中で）隣のセルに移動するしかないのです。</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>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>