Web辅助功能：输入中需要的表单标签是语义/可访问的吗？

我正在建设一个web应用程序，我想利用表单输入，但在某些情况下，我觉得表单标签膨胀的HTML。我知道验证或网站无法使用表单标签。但关于可访问性，表单标签是否为这些用户提供了语义支持？

我有一个按钮，将使用输入字段中的数据，因此没有用于提交表单。

此外，如果只存在一个输入，然后通过按钮的标签索引都不会有问题..

<label> 
    Some Label: <input type="text" id="input"> 
</label>

<form> 
     <label> 
      Some Label: <input type="text" id="input"> 
     </label> 
</form>

来源

2015-09-09 floor

我能想到的唯一好处就是能够添加''标签（并且可能会将其隐藏于有远见的用户身上）。听起来像这样只会有一个输入和一个按钮，但如果不清楚按钮和输入是否相关，这可能会有所帮助。 –

@StephenThomas你提出了一个很好的观点。但是这引出了一个问题，你需要一个输入表单的图例标签。应该考虑的边缘情况，但在大多数情况下是不必要的。 – floor

为什么你会发现'form'标签如此“膨胀”？ Otherwidse，它可以帮助将它作为本文的评论[链接]（http://www.bennadel.com/blog/2435-are-html-form-tags-required-to-display-form-input -controls.htm） – Michel

这不是需要。你可能想勾勒出你的表格，以便它可以很容易地导航到，即：

<form id="myform" role="form" aria-label="My greatest form">

如果你这样做，那么屏幕阅读器用户可以轻松地导航到与他/她的区域导航键的形式。而且他/她很容易知道表单的开始和结束位置。
我重申，这不是必需的，它对屏幕阅读器用户来说更加舒适。但是，如果你不想把他们的注意力吸引到整体形式上，那就让我们单独来做，不要听从这个建议。

来源

2015-09-09 22:52:09

在我的评论中详细地阐述了一下，忽略<form>标记可能很好。既然您提到页面上同时存在<input>元素和<button>，但我可以想象可能的方案，其中<form>标签可以提供帮助。据推测，有视力的用户在<input>和<button>之间建立连接可能没有问题，可能是因为页面的可视布局。但是，如果除了可视布局之外，它们之间的连接不清晰，那么具有辅助技术的用户可能会发现该页面混淆。在这种情况下，可以通过将<input>和<button>包装在一个<form>中，并将该格式设置为<legend>，从而明确表示要素之间的连接。图例的文字可以详细说明或以其他方式澄清连接。由于有远见的用户不需要这个图例，所以你可以隐藏他们的图例（通过将其置于屏幕外，例如position: absolute; left: -999999px;）。这看起来像是一个非常罕见的边缘案例，但也许它适用于你的情况。否则，我想不出有什么好的理由来包含<form>。

来源

2015-09-10 00:01:28

是的，我同意你的意见。我没有屏幕阅读器，所以我不能肯定地说，但有下一个元素的按钮，我认为这意味着它的关联。但你提出一个很好的观点。 – floor

但是关于可访问性，表单标签是否为这些用户提供了语义支持？

它可以。

如果您在WCAG （http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/G184）读取的技术形式中的一种，你会看到，辅助技术可能使用户能够循环回在表单中的第一个文本请示需要的时候。

因此，如果用户有这种可能性（虽然我认为它没有实现），但如果没有form标签，它将找不到任何东西。

来源

2015-09-10 14:14:20 Adam

伟大的一点。说得通。我想知道是否会有另一种方式来解决这个问题，而不使用表单标签。感谢您的意见。 – floor

就像斯蒂芬说的，你可以使用'fieldset'和'legend'标签，但它需要两个标签而不是一个标签。我非常喜欢辅助技术能够知道表单何时开始以及表单何时结束的想法。 – Adam

Web辅助功能：输入中需要的表单标签是语义/可访问的吗？

回答

相关问题