Ist ein Label für ein verstecktes Feld 508-konform?

Question

Ich habe den folgenden Struts2-Code, der eine Liste der Verlader generiert. Es wird nur angezeigt, nachdem der Benutzer die Versandart ausgewählt hat (die Klasse hidden wird durch JavaScript entfernt).

<div class ="showIfNotOther hidden"> 
<div class="row"> 
    <div class="col-xs-12 rowsecthead" id="shipperInfoHeader"><s:text name="shipperInfo"/></div> 
</div> 
<s:iterator value="chosenShipperViewList" status="status"> 
    <div class="row small-line-height"> 
     <div class="col-sm-2 col-xs-12 "><label for='<s:property value="%{'deleteShipper'+#status.index}" />' class="pull-right"><s:text name="deleteShipperInfo"></s:text>:</label></div> 
     <div class="col-sm-3 col-xs-12 text-left"> 
      <s:url var="deleteLink" action="shipment_deleteShipperFromChosenShipperViewList"></s:url> 
      <s:a id="%{'deleteShipper'+#status.index}" href="%{deleteLink}"> <img src="/llr/theme/delete.gif" width="16" height="16" alt="Map Red X" ></s:a> 
     </div> 
     <hr> 
    </div>     
</s:iterator> 

Der Struts2 Code generiert die folgende HTML, die jeweils "Löschen Shipper Info:" hat Label in Verbindung mit jedem <a> Element durch eine ID (deleteShipper0, deleteShipper1, etc.), die, was ich verstehe, ist muss 508 compliant sein.

<div class ="showIfNotOther hidden"> 
<div class="row"> 
    <div class="col-xs-12 rowsecthead" id="shipperInfoHeader">Shipper Information</div> 
</div> 
<div class="row small-line-height"> 
    <div class="col-sm-2 col-xs-12 "><label for='deleteShipper0' class="pull-right">Delete Shipper Info:</label></div> 
    <div class="col-sm-3 col-xs-12 text-left"> 
     <a id="deleteShipper0" href="/llr/shipment_deleteShipperFromChosenShipperViewList.action?organizationName=Mercy"><img src="/llr/theme/delete.gif" width="16" height="16" alt="Map Red X" ></a> 
    </div> 
    <hr> 
</div>     
<div class="row small-line-height"> 
    <div class="col-sm-2 col-xs-12 "><label for='deleteShipper1' class="pull-right">Delete Shipper Info:</label></div> 
    <div class="col-sm-3 col-xs-12 text-left"> 
     <a id="deleteShipper1" href="/llr/shipment_deleteShipperFromChosenShipperViewList.action?organizationName=Nuclear"><img src="/llr/theme/delete.gif" width="16" height="16" alt="Map Red X" ></a> 
    </div> 
    <hr> 
</div>     

Wenn ich den HTML-Code in den W3C Markup Validation Service setzen erhalte ich die Fehler

Das for Attribut des Label-Elements zu einer nicht verborgen Form Kontrolle beziehen.

Ist das HTML wirklich nicht kompatibel ist (und wenn es nicht ist, wie kann ich das Problem beheben), oder ist das nur ein Fehler in der W3C Markup Validation Service?

Answer 1

Wie durch die W3 definition ein label definiert:

Das Etikett Element stellt eine Beschriftung für eine Formsteuer.

Sie verwenden derzeit einen label Tag für einen Link, nicht für ein Formular-Steuerelement, das Ihr erster Fehler ist.

Und ja, es ist richtig:

Das for Attribut des Label-Elements zu einer nicht verborgen Form Kontrolle beziehen.

Wenn es mit einem Screenreader navigieren müssen Sie in der Lage sein, von dem Etikett Form Kontrolle zu gehen. Aber in Ihrem Fall scheint es, dass sowohl Ihr Label als auch Ihre zukünftige Formularsteuerung (sobald Sie den Link durch ein Formular-Steuerelement ersetzt haben) in demselben versteckten div sein werden. Sie müssen sich also nicht um solche Bemerkungen kümmern.

Aber ich denke, dass die Verwendung eines Formularsteuerelements diesen Kommentar aus dem W3-Validator entfernen wird, da es CSS nicht behandelt.