<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.3b］ フォームのラベルが適切な位置にありますか？</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.3 b);
                      WCAG 10.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ページにフォームのコントロールがあります。もし、各コントロールのラベルが適切な位置（コントロールの左側、あるいはすぐ上）に置かれていない場合は、このチェックポイントの要件を満たしていません。</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>
                  
               </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>さらに、音声ブラウザの利用者を考慮し、表記を省略しすぎないように注意する必要があります（例えば、「カナ」「かな」ではなく、「カタカナ」「ひらがな」などとします）。</p>
                     
                     <ul>
                        
                        <li>入力する文字種など、入力書式に自由度を持たせることが望ましい。
                           <br>（例えば、英数字の場合、半角文字と全角文字は、どちらでも入力可能とする。など）
                        </li>
                        
                        <li>文字の入力フィールドには、入力すべき文字種（漢字、全角文字など）を記述する。文字種に制限がない場合には、その旨を記述する。</li>
                        
                        <li>必須入力項目と任意入力項目との違いを、明確に示す。音声ブラウザでの読み上げを考慮し、必須であることは文字色や記号だけで表現しない。</li>
                        
                        <li>入力に関する指示、説明、注意事項などは、入力項目の近くに表示する。
                           <br>音声ブラウザの使用を考慮し、コントロールの前に記述することが望ましい（これにより、入力操作を行う前に、入力方法が把握できる）。
                        </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.3 操作及び入力
                           <br>b)</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>
                  
                  <p>なぜなら、ユーザーは必ずしもそのフォームを画面上で見ているわけではないからです（そのフォームを音声読み上げで利用しているかもしれません）。あるいは、画面拡大ソフトを使用していてフォームのごく一部分しか一度に見れなかったり、とても小さいPDAのモノクロ画面で見ていたりもします。</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>