<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.1a,5.2b］ 適切なマークアップとスタイルシートを使用していますか？</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.1 a), 5.2 b);
                      WCAG 3.1;
                      
               </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ページにあるイメージに、(X)HTMLで適切にマークアップすることのできる情報が含まれているかもしれません。
                     <br>例えば、数学の方程式をマークアップするのにMathMLを用いて、テキストおよびコントロールのレイアウトにはスタイルシートを用いることが可能です。
                     <br>文字情報を伝えるのにイメージを用いるのは、出来ることなら避けられればそれがベストです。よりよいのは、テキストとスタイルシートでその文字情報を表現することです。
                  </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>
                  
                  <ul>
                     
                     <li>見栄えのいいフォントのテキストがあるなら、CSSで同じような見栄えにできないか検討してください。</li>
                     
                     <li>数学の計算式があるなら、MathMLでコーディングしてください。詳細は、
                        <a>&amp;url_w3c_mathml;W3CのMathMLに関するページ</a>を参照。
                     </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>
                  
                  <blockquote style="margin:0px 10px 0px 20px;">
                     
                     <p>構造のための要素や属性と、表現のための要素や属性を切り分けて使用することにより、音声ブラウザなど、多様なブラウザの機能が利用できます。</p>
                     
                     <p>また、自分で作成したスタイルシートで、ホームページを参照している利用者もいます。構造のための要素や属性を正しく使用していない場合、利用者独自のスタイルシートが正しく適用されないことがあります。</p>
                     
                     <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.1 規格及び仕様
                           <br>a)</strong> ウェブコンテンツは，関連する技術の規格及び仕様に則り，かつ，それらの文法に従って作成しなければならない。
                        <br><strong>例</strong> 適切なマーク付け言語が存在する場合は，そのマーク付け言語を使用する。
                     </p>
                     
                     <p><strong>5.2 構造及び表示スタイル
                           <br>b)</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>W3Cは以下のように述べています (
                     <a>http://www.w3.org/TR/WCAG10-CORE-TECHS/#structurehttp://www.w3.org/TR/WCAG10-CORE-TECHS/#structure</a>）。
                  </p>
                  
                  <blockquote>
                     
                     <p>1つの、あるいは複数のドキュメントをデザインするとき、コンテンツ制作者は、そのドキュメントをどのような見た目でユーザーに提供するかを考える前に、そのドキュメントの構造を示すことを考えるべきです。ドキュメントの構造とそのコンテンツの見た目の表現を分離することには、アクセシビリティ、管理のしやすさ、そして移植のしやすさなどを改善することも含めて、たくさんの利点があります。</p>
                     
                     <p>構造と表現を区別するのは、時には困難なことかもしれません。例えば、多くのコンテンツ制作者は、水平線は構造的な区切りの意味を持っていると考えます。これは画面を見ているユーザーにとってはその通りかもしれませんが、しかし画面を見ることのできないユーザーあるいはグラフィカルなブラウザを使用していないユーザーにとっては、水平線はほとんど意味のないものかもしれません。例えば、(X)HTMLのソースコードにおいては、新しい段落の始まりを示すためには(X)HTMLのh要素（h1～h6）でマークアップすべきです。これを水平線を引くような見た目の表現あるいは他の手段で<em>補足</em>したとしても、それをマークアップの代わりにしてはいけません。
                     </p>
                     
                     <p>また、その逆もしかりです。コンテンツ制作者は、構造を示す要素を視覚的な表現のために用いるべきではありません。例えば、(X)HTMLでblockquote要素を使うと、ブラウザがその部分のテキストをインデントするといっても、それはそういった見た目の表現のためではなく、引用箇所であることを示すための要素です。インデントのためにblockquote要素を用いることは、引用箇所がマークアップされていると考えているユーザーや検索エンジンのロボットを混乱させます。</p>
                     
                     <p>その部分が構造を示すものなのか、表現を示すものなのか、を判断するには、そのドキュメントの文書のアウトラインを作成してみるとよいでしょう。階層構造における各ポイントは、構造上の変化を示すものです。そういった変化をマークアップするには構造を示す要素を用いて、視覚と聴覚により訴えるためには表現を示すマークアップを行ってください。先ほどの水平線を引くというのは、この文書のアウトラインには出てこないので、それは構造を示すのではなく、見た目の表現のためのものであるといえます。
                        <strong>注意:</strong>このクイックテストは、章、節、そして段落という構造を確認するためのものです。文章中での構造を示すには、さらに省略語、自然言語の切り替わり、用語の定義、およびリスト（箇条書き）などを文章中から探して、それらを(X)HTMLのソースコード上でマークアップしてください。
                     </p>
                     
                  </blockquote>
                  
                  <p>他のドキュメント (
                     <a>&amp;url_wcag;&amp;WCAG;</a>) では、以下のように述べています。
                  </p>
                  
                  <blockquote>
                     
                     <p>
                        <strong>ガイドライン 3. マークアップおよびスタイルシートを適切に用いること
                           <br>ドキュメントを適切な構造を示す要素でマークアップしなさい。見た目の表現を指定するには、表現を示す要素および属性ではなく、スタイルシートを用いなさい。</strong>
                        
                     </p>
                     
                     <p>マークアップを（仕様に準拠せずに）不適切に用いることは、アクセシビリティの低下につながります。見た目の表現のためにマークアップを誤用する（例えば、テーブルをレイアウトに用いる、あるいは見出しを文字サイズを変更するのに用いる）と、特別なソフトウェアのユーザーは、Webページの構造を理解したり、サイト内を移動したりするのが困難になります。さらに、構造を伝えるのに、構造を示すマークアップではなく、見た目の表現を示すマークアップを用いる（例えば、データの表に見えるものをpre要素で表現する）と、ユーザーエージェントはそのWebページを的確にレンダリングできなくなります。[...]</p>
                     
                     <p>コンテンツ制作者は、旧いブラウザで意図した表現ができるタグを用いる（あるいは、誤用する）傾向にあるかもしれません。これがアクセシビリティ上の問題を引き起こすのです。その見た目の表現が、そのドキュメントをあるユーザーに対してはアクセシブルではなくすることを正当化するのに十分なだけの理由があって、それだけ重要なものかどうかを慎重に判断すべきです。</p>
                     
                     <p>また、その一方で、コンテンツ制作者は、特定のブラウザあるいは支援技術がその要素を正しく処理しないから、という理由で適切なマークアップを怠るべきではありません。例えば、ある旧いスクリーンリーダーが横並びになった複数のセル内にあるテキストを適切に読み上げられなかったとしても、表形式の情報をマークアップするには(X)HTMLのtable要素を用いるのが適切です（WCAG
                        1.0 チェックポイント 10.3 参照）。table要素を正しく用いて容易に変換できるテーブル（表）を作成すること（WCAG 1.0 ガイドライン 5. 参照）で、ソフトウェアは二次元によるマス目での表現以外の方法でもそのテーブルをレンダリングすることが可能になります。
                     </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 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>