<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］ データテーブルに表題（caption要素）がありません</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;">データテーブルに表題（caption要素）がありません</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)</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ページにあるデータテーブル（th、thead、tbody、tfoot、のいずれかの要素があるテーブル）がありますが、表題を示すcaption要素がないか、caption要素があっても無効です。有効なcaption要素とは、&lt;caption&gt;タグと&lt;/caption&gt;タグの間が以下のどれにも該当しないものです。</p>
                  
                  <ul>
                     
                     <li>空ではない ("")</li>
                     
                     <li>1つ以上のスペースのみではない (" ")</li>
                     
                     <li>プレースホルダー・テキストのみではない</li>
                     
                  </ul>
                  
               </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>データテーブルのtable要素の開始タグ（&lt;table&gt;タグ）の直後にcaption要素を挿入して、そのデータテーブルの内容を簡潔に説明する表題を記述してください。</p>
                  
                  <p>caption要素で記述する表題は、例えば「表1.　商品別の売上推移一覧」、あるいは「商品別の売上推移一覧表」というように、音声ブラウザやスクリーンリーダーで読み上げても、表（データテーブル）であることが分かりやすい記述にするとよりよいでしょう。</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>
                     
                     <ul>
                        
                        <li>&lt;caption&gt;タグで、わかりやすい表題を指定する（レイアウトのためのテーブルには表題は不要）。</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>例1.</strong> HTML では，caption 要素を用いて分かりやすい表題を明示し，表に含まれる情報がどのようなものかを分かるようにする。
                     </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>データテーブルを用いる場合は、caption要素を用いてそのデータテーブルの表題をつけます。表題はそのデータテーブルの内容を簡潔に説明した内容にします。caption要素は、table要素の開始タグの直後に1つだけ用いることが可能です。</p>
                  
                  <p>テキストの本文の段落に見出しがあると、ユーザーは文章を読まなくてもその段落の概要が把握できるのと同じように、データテーブルに表題があると、そのデータテーブルの内容を確認しなくてもそのデータの概要を把握することができるようになります。</p>
                  
                  <p>データテーブルは、縦横の二次元で情報を伝えているため、特に音声ブラウザやスクリーンリーダーを使用しているユーザーにとっては、その内容はもちろんのこと、データテーブルの開始位置を把握することも困難です。表題を提供することで、ここからデータテーブルの音声読み上げが始まるという情報をユーザーに暗に伝えることができるようにもなります。さらに言えば、caption要素で記述するデータテーブルの表題を、例えば以下にあるHTMLソースコード例のように、「表1.　商品別の売上推移一覧」、あるいは「商品別の売上推移一覧表」と、表であることが分かりやすい記述にするとよりよいでしょう。</p>
                  <pre>
&lt;table&gt;
&lt;caption&gt;表1.　商品別の売上推移一覧&lt;/caption&gt;
&lt;tr&gt;
......
</pre>
                  </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>