Is a label for an hidden field 508 compliant?

Question

I have the following Struts2 code which generates a list of shippers. It only shows after the user choses the type of shipment (the hidden class is removed by JavaScript).

<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>

The Struts2 code generates the following HTML which has each "Delete Shipper Info:" label associated with each <a> element by an id (deleteShipper0, deleteShipper1, etc.) which is what I understand is required to be 508 compliant.

<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>                

When I put the HTML in the W3C Markup Validation Service I get the error

The for attribute of the label element must refer to a non-hidden form control.

Is the HTML really not compliant (and if it isn't, how do I fix it), or is this just a bug in the W3C Markup Validation Service?

Answer 1

As defined by the W3 definition of a label:

The label element represents a caption for a form control.

You are currently using a label tag for a link, not for a form control, which is your first error.

And yes, it is right:

The for attribute of the label element must refer to a non-hidden form control.

When navigating with a screenreader you have to be able to go from the label to the form control. But in your case, it seems that both your label and your future form control (once you will have replaced the link with a form control) will be in the same hidden div. So you won't have to care about such remark.

But I think that using a form control will remove this comment from the W3 validator as it does not handle CSS.