<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 チェックポイント 9.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><br>
                  
                  <p>Webページに、他のページを読み込むイベントハンドラ<strong>OnChange</strong>のある<strong>select</strong>要素による<strong>ジャンプメニュー</strong>（すなわち、それぞれ異なるページにリンクしている選択肢がリストになったセレクトメニュー）があります。キーボードを使用しているユーザーは、選択肢を選ぶのにリストの中をスクロールすることができません。
                  </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>ジャンプメニューをデバイス非依存にするには、以下の4つのステップがあります。</p>
                  
                  <ol>
                     
                     <li>select要素から<strong>onChange</strong>属性を削除する。
                     </li>
                     
                     <li>メニューの後にボタン（type="button"のinput要素）を追加する。</li>
                     
                     <li>そのボタンに、先に削除したonChange属性と同じ内容のonClick属性を追加する。</li>
                     
                     <li>最後に、onClick属性と同じ内容のonKeyPress属性を追加する。</li>
                     
                  </ol>
                  
                  <p>Dreamweaverでドキュメントに<strong>ジャンプメニュー</strong>を追加したいときは、自動的にメニューの後にボタンを挿入することができます。[ジャンプメニューの挿入]ダイアログで、"<strong>メニューの後に移動ボタンを挿入</strong>" をチェックしてください。その際、忘れずに select要素のonChange属性を削除して、ボタンにonKeyPress属性を追加してください。
                  </p>
                  
                  <p>例えば、次のHTMLソースコードは<strong>悪い例</strong>です。
                  </p>
                  <pre>
&lt;form name="select_country"&gt;
国を選択:
  &lt;select name="country" onChange="MM_jumpMenu('parent',this,0)"&gt;
   &lt;option value="http://www.this_site.com/be" selected&gt;ベルギー&lt;/option&gt;
   &lt;option value="http://www.this_site.com/us"&gt;アメリカ合衆国&lt;/option&gt;
  &lt;/select&gt;
&lt;/form&gt;
</pre>
                  <p>アクセシブルなHTMLソースコード（良い例）:</p>
                  <pre>
&lt;form name="select_country" action="http://www.this_site.com/jump.cgi"&gt;
国を選択:
  &lt;select name="country"&gt;
   &lt;option value="http://www.this_site.com/be" selected&gt;ベルギー&lt;/option&gt;
   &lt;option value="http://www.this_site.com/us"&gt;アメリカ合衆国&lt;/option&gt;
  &lt;/select&gt;
 &lt;input type="submit" value="選択"&gt;
&lt;/form&gt;
</pre>
                  </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>select要素に関連付けられているJavaScriptが原因で、キーボードを使用しているユーザーは選択肢のリストをスクロールすることができません。これは、<strong>デバイス非依存</strong>ではありません。
                  </p>
                  
                  <p>JavaScriptは、ユーザーが任意の入力および出力デバイスを使ってWebサイトを操作することができれば、デバイス非依存であるといえます。入力デバイスには、ポインティング・デバイス（マウスなど）、キーボード、点字入力デバイス、ヘッドセット装置、マイクロホン、その他があります。出力デバイスとしては、モニタ、音声合成装置、および点字ピンディスプレイなどが挙げられます。</p>
                  
                  <p>一般的に、キーボードのみによる操作が可能なWebページは、音声認識入力あるいはコマンドライン・インターフェースを用いてもアクセシブルです。</p>
                  
                  <p>また、<strong>ジャンプメニュー</strong>は、JavaScriptがユーザーのブラウザで実行可能な場合のみ有効であることを覚えておいてください。JavaScriptをサポートしていないブラウザ（例えば、携帯電話やPDAのブラウザ）があり、セキュリティ上の理由からブラウザのJavaScriptを無効にしている企業や団体があります。
                     <br>noscript要素で、JavaScriptの代替となり同等の役割を果たすコンテンツおよびインタラクション（すなわち、リンクやフォーム）を提供してください。
                  </p>
                  
                  <p>また、メニューで選択されたURLを処理して、そのページへ移動させるサーバサイドのスクリプトを用いることも検討してください。</p>
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>