<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 チェックポイント 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><br>
                  
                  <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でコーディングしてください。詳細は、
                        <strong>W3CのMathMLに関するページ</strong>
                        [&amp;url_w3c_mathml;]
                        を参照。
                     </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><br>
                  
                  <p>W3Cは以下のように述べています (
                     <strong>http://www.w3.org/TR/WCAG10-CORE-TECHS/#structure</strong>
                     [http://www.w3.org/TR/WCAG10-CORE-TECHS/#structure]
                     ）。
                  </p>
                  
                  <blockquote>
                     
                     <p>1つの、あるいは複数のドキュメントをデザインするとき、コンテンツ制作者は、そのドキュメントをどのような見た目でユーザーに提供するかを考える前に、そのドキュメントの構造を示すことを考えるべきです。ドキュメントの構造とそのコンテンツの見た目の表現とを分離することには、アクセシビリティ、管理のしやすさ、そして移植のしやすさなどを改善することも含めて、たくさんの利点があります。</p>
                     
                     <p>構造と表現を区別するのは、時には困難なことかもしれません。例えば、多くのコンテンツ制作者は、水平線は構造的な区切りの意味を持っていると考えます。これは画面を見ているユーザーにとってはその通りかもしれませんが、しかし画面を見ることのできないユーザーあるいはグラフィカルなブラウザを使用していないユーザーにとっては、水平線はほとんど意味のないものかもしれません。例えば、HTMLコンテンツにおいては、新しい段落の始まりを示すにはHTML
                        4.01のh要素（h1～h6）でマークアップすべきです。これを水平線を引くような見た目の表現あるいは他の手段で<strong>補足</strong>したとしても、それをマークアップの代わりにしてはいけません。
                     </p>
                     
                     <p>また、その逆もしかりです。コンテンツ制作者は、構造を示す要素を視覚的な表現のために用いるべきではありません。例えば、HTMLではblockquote要素はブラウザによってテキストをインデントするといっても、それは見た目の表現のための要素ではなく、引用箇所を示すためのものです。インデントのためにblockquote要素を用いることは、引用箇所をマークアップするものと考えているユーザーや検索エンジンのロボットを混乱させます。</p>
                     
                     <p>その部分が構造を示すものなのか、表現を示すものなのか、を判断するには、そのドキュメントのアウトラインを作成してみてください。階層構造における各ポイントは、構造上の変化を示すものです。そういった変化をマークアップするには構造を示す要素を用いて、視覚と聴覚により訴えるためには表現を示すマークアップを行ってください。先ほどの水平線を引くというのは、このアウトラインには出てこないので、それは構造を示すのではなく、表現のためのものであるといえます。
                        <strong>注意:</strong>このクイックテストは、章、節、そして段落という構造を確認するためのものです。文章中での構造を示すには、省略語、自然言語の切り替わり、用語の定義、およびリスト（箇条書き）などを探してマークアップしてください。
                     </p>
                     
                  </blockquote>
                  
                  <p>他のドキュメント (
                     <strong>&amp;WCAG;</strong>
                     [&amp;url_wcag;]
                     ) では、以下のように述べています。
                  </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>
         </table>
      </div>
   </body>
</html>