一个隐藏字段的标签符合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兼容性所必需的。

<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标记验证服务中时，出现错误。

标签元素的“for”属性必须引用非隐藏表单控件。

HTML确实不符合规范吗（如果不符合规范，该如何修复），还是这只是W3C标记验证服务中的错误？

- ponder275

---

尝试使用508检查器而不是纯HTML检查器扫描您的网站：http://www.508checker.com/ - Andrea Ligios

我的代码在本地主机上，因此我认为在使用你建议的网站之前需要部署代码。此外，所涉及的代码只会在添加了一些承运人后才会显示出来。我不知道如何传递一个URL来显示代码。 - ponder275

你可以添加托运人，转储DOM并发布静态的.html页面，然后进行验证。但是使用这个工具会更快：https://www.totalvalidator.com/tools/index.html（不确定它是否允许直接输入验证，但它是一个桌面应用程序，所以我想它*应该*可以）。 - Andrea Ligios

我认为这是广泛使用的，所以安全下载吧？ - ponder275

Mr. Safe已经挂了... :p - Andrea Ligios

Answer 1

根据 W3定义 中对 label 的定义：

label 元素表示表单控件的标题。

你目前正在使用 label 标签来标记链接，而不是表单控件，这是你的第一个错误。

而且，是的：

label 元素的 for 属性必须引用非隐藏的表单控件。

使用屏幕阅读器进行导航时，你必须能够从标签到表单控件进行跳转。但在你的情况下，似乎你的标签和未来的表单控件（一旦你用表单控件替换链接）都将在同一个隐藏的 div 中。因此，你不必担心这样的备注。

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

- Adam

---

我不知道如何将代码与表单控件配合使用，而不是链接。那么我是否应该只使用普通文本来说明我的链接？ - ponder275

我不确定我的问题是否清楚。如果我使用纯文本来标注我的链接，它是否符合508合规要求？链接本身是否为屏幕阅读器提供足够的信息？谢谢！ - ponder275