<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 チェックポイント 12.4</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ページに、コントロールと対応するラベルがlabel要素で関連付けられていないフォームがあります。</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>ラベルとコントロールの関連付けは、以下の3つのステップで行ってください。</p>
                  
                  <ol>
                     
                     <li><strong>id</strong>属性を用いて、コントロールにユニークなIDを割り当てる。
                     </li>
                     
                     <li>そのコントロールと関連付けたいテキストまたはイメージのラベルを<strong>label</strong>要素でマークアップする。
                     </li>
                     
                     <li>そのlabel要素に<strong>for</strong>属性を付加して、その属性値にコントロールのid属性値と同じ値を記述する。
                     </li>
                     
                  </ol>
                  
               </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>フォームをTabキーで操作しているとき、画面を見ているユーザーは、コントロールをすぐ近くにあるラベルと容易に関連付けることができます。しかしながら、スクリーンリーダーのユーザーは、視覚的に判断することができません。どのラベルがどのコントロールと対応しているのかを明示的に関連付けることが必要です。</p>
                  
                  <p>ベストな方法は、<strong>label</strong>要素を用いてこの関連付けを行うことです。label要素でラベルとなるテキストをマークアップして、label要素の<strong>for</strong>属性値をコントロールの<strong>id</strong>属性値と同じ値にします。
                  </p>
                  
                  <p>原則として、1つのラベルは1つのコントロールと関連付けることができますが、2つ以上のラベルを同じコントロールに関連付けることも可能です。ただ、すべてのスクリーンリーダーがサポートしているわけではないので、各コントロールに対して1つのラベルを関連付けることを推奨します。</p>
                  
                  <p>あるラベルをあるコントロールと暗黙的に関連付けることも可能です。ラベルとなるテキストとコントロールの両方をlabel要素で囲みます。このテクニックは、HTML 4.01の勧告文書（標準仕様）で示されていますが、まだすべてのスクリーンリーダーがサポートしているわけではありません。</p>
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>