<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);
                      
               </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>
                  
                  <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>
                  
                  <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>
                  
                  <ul>
                     
                     <li>数字やアルファベットを "全角" あるいは "半角" のどちらかで入力</li>
                     
                     <li>郵便番号や電話番号でハイフン（"-"）が必要あるいは不要</li>
                     
                     <li>ふりがなを "ひらがな" あるいは "カタカナ" で入力</li>
                     
                  </ul>
                  
                  <p>ふりがなの入力方法を指定する際には、音声ブラウザやスクリーンリーダーのユーザーへの配慮が必要です。カタカナで入力する場合はカタカナで "フリガナ"、ひらがなで入力する場合はひらがなで "ふりがな" 、とラベルを記述していることがありますが、音声で読み上げた場合にはどちらも同じように聞こえて、カタカナとひらがなの区別がつかないので注意が必要です。例えば、"フリガナ（カタカナ）"
                     というように、カタカナなのかひらがななのかを括弧書きで明記するとよいでしょう。
                  </p>
                  
                  <p>そして、入力方法の指定とあわせて入力例を具体的に示すことで、ユーザーにとってはより理解しやすくなります。例えば、郵便番号を入力する際にハイフンが必要な場合には、"ハイフンを入れてください" とだけあるよりも、"ハイフンを入れてください（例："123-4567"）"
                     というように入力例まで示されていたほうが、ユーザーはより正確にその入力方法の指定を理解することができるでしょう。
                  </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>