<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.2f］ フレームのタイトル（title属性）は適切ですか？</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;">フレームのタイトル（title属性）は適切ですか？</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 f);
                      WCAG 12.2;
                      
               </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ページにあるframeset要素およびframe要素にtitle属性があります。そのtitle属性値が、そのフレームの目的および他のフレームとの関係について説明されていることを確認してください。</p>
                  
                  <p>もし、必要であれば、longdesc属性も追加してください。</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>frame要素のtitle属性値にそのフレームの目的や他のフレームとの関係が分かりやすく記述されていることを確認してください。もし、title属性値で十分に説明できない場合（例えば、イメージ、リンク、あるいはその他のマークアップが必要な場合）には、longdesc属性を用いて、長文の説明文を提供するページへのリンクを設定してください。
                     <br>longdesc属性を用いたソースコード例は、"解説" を参照してください。
                  </p>
                  
                  <p>name属性は、プログラム上の目的で用いられますが、属性値にスペースを含めることはできません。title属性値には、スペースを含めることができますが、フレームを説明するテキストを記述します。基本的には、両方とも用いるようにしてください。</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>
                     
                     <p>このような場合、検索結果のページにはナビゲーションやメニューが表示されず、その後の操作が困難になります。</p>
                     
                     <p>さらに、音声ブラウザの利用者は、フレームを1つずつ選択して読み上げなければなりません。
                        <br>フレームで細かく分割されたページは、ページ全体の内容を把握するまでに、時間がかかります。
                     </p>
                     
                     <ul>
                        
                        <li>分割する領域は、4つまで（ヘッダー、メニュー、本文、フッター）とする。</li>
                        
                        <li>フレームは、入れ子（フレーム内にフレームを設定する）にしない。</li>
                        
                        <li>各フレームの役割（ヘッダー、メニュー、本文など）を整理して、ページの構造を明確にする。</li>
                        
                        <li>リンクを使用し、フレームの一部を変更する場合は、フレームの定義ファイルにリンクしないことが望ましい。
                           <br>（フレーム全体のフォーマットがほとんど変化しないのに、フレームの定義ファイルへリンクすると、音声ブラウザの利用者は、各フレームの役割を再度、すべて確認しなければなりません。）
                        </li>
                        
                        <li>&lt;noframes&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>f)</strong> フレームは，必要以上に用いないことが望ましい。使用するときは，各フレームの役割が明確になるように配慮しなければならない。
                        <br><strong>参考</strong> フレームを使用したページは，各フレームの役割及び各フレーム内のデータの変化が分かりにくいために，情報アクセシビリティを損ねる可能性がある。また，音声ブラウザによっては，フレームを別々のページとして認識する場合があり，作成者の意図どおりに利用者が理解できない可能性もある。タイトル又は広告などを表示するためだけにフレームを使用したり，レイアウトのために中身が空白のフレームを作ったりすると，利用者は理解しにくくなる。
                        <br><strong>例1.</strong> HTML では，frame 要素にはtitle 属性を用いて各フレームの役割を記述する。また，フレーム内の各ページにはtitle 要素を用いて内容にあった固有のタイトルを付ける。
                     </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>
                  
                  <p>"トップ"、"左下"、"フレーム1"、"フレーム2" のようなタイトルがフレームのtitle属性値として記述されていることがよくありますが、これでは説明が不十分ですし、ユーザーはそのフレームと他のフレームとの関係を理解することができません。</p>
                  
                  <p>以下のHTMLソースコード例を考えてみてください（
                     <a>http://www.w3.org/TR/WCAG10-HTML-TECHS/#frame-text-equivalentHTML Techniques for Web Content Accessibility Guidelines 1.0</a>の一部を改変）。
                  </p>
                  <pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;今日のニュース - 日本新聞&lt;/title&gt;
  &lt;/head&gt;

  &lt;frameset cols="10%,*,10%"&gt;

  &lt;frameset rows="20%,*"&gt;
    &lt;frame src="promo.html" name="promo" title="おすすめ"&gt;
    &lt;frame src="sitenavbar.html" name="navbar"
       title="メニュー" longdesc="frameset-desc.html#navbar"&gt;
  &lt;/frameset&gt;

  &lt;frame src="story.html" name="story" title="ニュース - 本文"
     longdesc="frameset-desc.html#story"&gt;

  &lt;frameset rows="*,20%"&gt;
    &lt;frame src="headlines.html" name="index" title="その他の
      ニュースの目次" longdesc="frameset-desc.html#headlines"&gt;
    &lt;frame src="ad.html" name="adspace" title="広告"&gt;
  &lt;/frameset&gt;

  &lt;noframes&gt;
    &lt;p&gt;&lt;a href="noframes.html"&gt;ノンフレーム版&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;&lt;a href="frameset-desc.html"&gt;フレームの説明&lt;/a&gt;&lt;/p&gt;

  &lt;/noframes&gt;

  &lt;/frameset&gt;
&lt;/html&gt;
</pre>
                  <p>frameset-desc.html は、以下のようなコンテンツです。</p>
                  <pre>
#Navbar - このフレームには、&lt;a href="sitenavbar.html"&gt;このサイト
          の主要コンテンツ&lt;/a&gt;へのリンクがあります。海外ニュース、
          国内ニュース、地方ニュース、技術ニュース、そして、エンター
　　　　　テインメント・ニュース、などです。

#Story  - このフレームには&lt;a href="story.html"&gt;ニュースの本文&lt;/a&gt;が
　　　　　表示されます。

#Index  - このフレームは、そのコーナー内のその日の
          &lt;a href="headlines.html"&gt;主なニュースの目次&lt;/a&gt;です。
</pre>
                  <p>noframe要素は、ユーザーがフレームをサポートしていない特別なブラウザ（例えば、PDAや携帯電話のブラウザ）を使用しているときに役に立ちます。</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>