隐藏字段的标签是否符合 508 标准？

Question

我有以下 Struts2 代码可以生成托运人列表。它仅在用户选择发货类型后显示（hidden class 已被 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>

Struts2 代码生成以下 HTML，其中每个 "Delete Shipper Info:" 标签通过 id（deleteShipper0、deleteShipper1, 等等）这是我所理解的必须是 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>

当我把 HTML 放在 W3C Markup Validation Service 中时，我得到了错误

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

HTML 是否真的不合规（如果不合规，我该如何解决），或者这只是 W3C 标记验证服务中的一个错误?

Answer 1

定义为 W3 definition of a label:

The label element represents a caption for a form control.

您目前正在将 label 标记用于 link，而不是用于表单控件，这是您的第一个错误。

是的，没错：

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

使用屏幕阅读器导航时，您必须能够从标签转到表单控件。但在你的情况下，你的标签和你未来的表单控件（一旦你将 link 替换为表单控件）似乎都将位于同一个隐藏 div 中。这样你就不用在意这样的评论了。

但我认为使用表单控件将从 W3 验证器中删除此评论，因为它不处理 CSS。

隐藏字段的标签是否符合 508 标准？

Is a label for an hidden field 508 compliant?

html

struts2

accessibility

w3c-validation

section508