隐藏字段508的标签是否符合？ [英] Is a label for an hidden field 508 compliant?

问题描述

我有以下的Struts2代码来生成一个托运人清单。它仅在用户选择装运类型后才显示（隐藏类被JavaScript删除）。

 < div class =showIfNotOther hidden> 
< div class =row> 
< div class =col-xs-12 rowsectheadid =shipperInfoHeader>< s：text name =shipperInfo/>< / div> 
< / div> 
< s：iterator value =chosenShipperViewListstatus =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> 
  < / div> 
< hr> 
< / div> 
< / s：iterator> 
  

Struts2代码生成以下代码与每个< a> 元素通过一个id（ deleteShipper0 ）相关联的每个删除发件人信息： ， deleteShipper1 等），这是我理解的要求是 508 compliant 。

 < div class =showIfNotOther hidden> 
< div class =row> 
< div class =col-xs-12 rowsectheadid =shipperInfoHeader>托运人信息< / div> 
< / div> 
< div class =row small-line-height> 
< div class =col-sm-2 col-xs-12>< label for ='deleteShipper0'class =pull-right>删除发件人信息：< / label>< ; / DIV> 
< div class =col-sm-3 col-xs-12 text-left> 
< a id =deleteShipper0href =/ llr / shipment_deleteShipperFromChosenShipperViewList.action？organizationName = Mercy>< img src =/ llr / theme / delete.gifwidth =16height = 16alt =地图红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>删除发货人信息：< / label>< ; / DIV> 
< div class =col-sm-3 col-xs-12 text-left> 
< a id =deleteShipper1href =/ llr / shipment_deleteShipperFromChosenShipperViewList.action？organizationName = Nuclear>< img src =/ llr / theme / delete.gifwidth =16height = 16alt =地图红X>< / a> 
< / div> 
< hr> 
< / div> 
  

W3C标记验证服务 我收到错误

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


HTML是否真的不符合要求（如果不符合，我该如何解决），还是只是一个错误在 W3C标记验证服务中定义

//www.w3.org/TR/html-markup/label.htmlrel =noreferrer> W3定义 标签：

标签元素代表表单控件的标题。

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

是的，它是正确的：

在使用屏幕阅读器进行导航时，您可以使用标签元素的code>属性来引用非隐藏窗体控件。能够从标签转到表单控件。但就你而言，似乎你的标签和未来的表单控件（一旦你将用表单控件替换链接）将会隐藏在同一个隐藏的 div 中。所以你不必关心这样的评论。

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

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?

解决方案

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.

这篇关于隐藏字段508的标签是否符合？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！