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

Question

我有以下生成托运人列表的 Struts2 代码。它仅在用户选择装运类型后显示(JavaScript 删除了 hidden 类)。

<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，其中每个“删除托运人信息:”标签与每个 <a> 相关联。 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 定义标签的:

The label element represents a caption for a form control.

您当前正在为链接而不是表单控件使用 label 标记，这是您的第一个错误。

是的，这是对的:

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

使用屏幕阅读器导航时，您必须能够从标签转到表单控件。但在你的情况下，你的标签和你 future 的表单控件(一旦你将链接替换为表单控件)似乎都将位于同一个隐藏的 div 中。所以你不必在意这样的话。

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