title: Is a label for an hidden field 508 compliant?
body: <p>I have the following Struts2 code which generates a list of shippers.  It only shows after the user choses the type of shipment (the <code>hidden</code> class is removed by JavaScript).</p>
  
  <pre><code>&lt;div class ="showIfNotOther hidden"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-xs-12  rowsecthead" id="shipperInfoHeader"&gt;&lt;s:text name="shipperInfo"/&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;s:iterator value="chosenShipperViewList" status="status"&gt;
      &lt;div class="row small-line-height"&gt;
          &lt;div class="col-sm-2 col-xs-12 "&gt;&lt;label for='&lt;s:property value="%{'deleteShipper'+#status.index}" /&gt;' class="pull-right"&gt;&lt;s:text name="deleteShipperInfo"&gt;&lt;/s:text&gt;:&lt;/label&gt;&lt;/div&gt;
          &lt;div class="col-sm-3 col-xs-12 text-left"&gt;
              &lt;s:url var="deleteLink" action="shipment_deleteShipperFromChosenShipperViewList"&gt;&lt;/s:url&gt;
              &lt;s:a id="%{'deleteShipper'+#status.index}" href="%{deleteLink}"&gt; &lt;img   src="/llr/theme/delete.gif" width="16" height="16" alt="Map Red X" &gt;&lt;/s:a&gt;
          &lt;/div&gt;
          &lt;hr&gt;
      &lt;/div&gt;                
  &lt;/s:iterator&gt;
  </code></pre>
  
  <p></p>
  
  <p>The Struts2 code generates the following HTML which has each "Delete Shipper Info:" label associated with each <code>&lt;a&gt;</code> element by an id (<code>deleteShipper0</code>, <code>deleteShipper1</code>, etc.) which is what I understand is required to be <a href="http://www.508checker.com/what-is-508-compliance" rel="nofollow">508 compliant</a>.</p>
  
  <pre><code>&lt;div class ="showIfNotOther hidden"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-xs-12  rowsecthead" id="shipperInfoHeader"&gt;Shipper Information&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row small-line-height"&gt;
      &lt;div class="col-sm-2 col-xs-12 "&gt;&lt;label for='deleteShipper0' class="pull-right"&gt;Delete Shipper Info:&lt;/label&gt;&lt;/div&gt;
      &lt;div class="col-sm-3 col-xs-12 text-left"&gt;
          &lt;a id="deleteShipper0" href="/llr/shipment_deleteShipperFromChosenShipperViewList.action?organizationName=Mercy"&gt;&lt;img   src="/llr/theme/delete.gif" width="16" height="16" alt="Map Red X" &gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;hr&gt;
  &lt;/div&gt;                
  &lt;div class="row small-line-height"&gt;
      &lt;div class="col-sm-2 col-xs-12 "&gt;&lt;label for='deleteShipper1' class="pull-right"&gt;Delete Shipper Info:&lt;/label&gt;&lt;/div&gt;
      &lt;div class="col-sm-3 col-xs-12 text-left"&gt;
          &lt;a id="deleteShipper1" href="/llr/shipment_deleteShipperFromChosenShipperViewList.action?organizationName=Nuclear"&gt;&lt;img src="/llr/theme/delete.gif" width="16" height="16" alt="Map Red X" &gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;hr&gt;
  &lt;/div&gt;                
  </code></pre>
  
  <p>                </p>
  
  <p>When I put the HTML in the <a href="https://validator.w3.org/" rel="nofollow"><em>W3C Markup Validation Service</em></a> I get the error</p>
  
  <blockquote>
    <p>The <code>for</code> attribute of the label element must refer to a non-hidden form control.  </p>
  </blockquote>
  
  <p>Is the HTML really not compliant (and if it isn't, how do I fix it), or is this just a bug in the <em>W3C Markup Validation Service</em>?</p>