Web 可访问性：输入周围的表单标签是否需要语义/可访问？答案

【问题标题】：Web Accessibility: Is the form tag required around inputs to be semantic / accessible?Web 可访问性：输入周围的表单标签是否需要语义/可访问？
【发布时间】：2015-09-09 19:22:21
【问题描述】：

嘿，有点奇怪的问题..

我正在构建一个 Web 应用程序，我想使用表单输入，但在某些情况下，我觉得表单标签会使 html 膨胀。我知道验证或网站工作不需要表单标签。但在可访问性方面，表单标签是否为这些用户提供任何语义支持？

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

如果只有一个输入后跟一个按钮，标签索引也无关紧要..

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

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

【问题讨论】：

我能想到的唯一好处是能够添加<legend> 标签（并且可能对有视力的用户隐藏它）。听起来这将是一个只有一个输入和一个按钮的延伸，但如果不清楚按钮和输入是否相关，那可能会有所帮助。
@StephenThomas 你提出了一个好观点。但这引出了一个问题，在什么情况下您需要一个输入表单的图例标签。应该考虑但在大多数情况下是不必要的边缘情况。
为什么你会发现form 标签如此“臃肿”？否则，将其作为对本文的评论可能会有所帮助link
@Michel 因为当我根本不使用表单函数时，为什么我必须将输入包装在表单标签中。否则没有意义的额外标记..当然除非它是为了可访问性因此问题。那篇文章是 2012 年的，最新的评论似乎没有任何反馈是 2014 年的。Ben Nadel 是老板，我会阅读这篇文章。仅标题可能表明它可以解决我的问题。但从你的评论来看，它没有。感谢您的意见。

标签： html forms accessibility

【解决方案1】：

详细说明我的评论，省略<form> 标记可能没问题。既然您提到页面上同时存在<input> 元素和<button>，我可以想到<form> 标签可以提供帮助的一个可能场景。据推测，有视力的用户在<input> 和<button> 之间建立连接不会有问题，这可能是因为页面的视觉布局。但是，如果除了视觉布局之外它们之间的联系不清楚，那么使用辅助技术的用户可能会发现页面令人困惑。在这种情况下，您可以通过将<input> 和<button> 包装在单个<form> 中并给出该表单<legend> 来明确元素之间的连接。图例的文本可以详细说明或以其他方式阐明这种联系。由于有视力的用户不需要图例，您可以向他们隐藏图例（通过将其放置在屏幕外，例如position: absolute; left: -999999px;）这似乎是一个非常罕见的边缘情况，但它可能适用于您的情况。否则，我想不出任何充分的理由来包含<form>。

【讨论】：

是的，我同意你的看法。我没有屏幕阅读器，所以我不能肯定地说，但是下一个元素是我认为的按钮，这意味着它是相关联的。但你的观点非常好。

【解决方案2】：

但就可访问性而言，表单标签是否为这些用户提供任何语义支持？

可以。

如果您阅读了 WCAG 中的表单技术之一 (http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/G184)，您将看到辅助技术可能使用户能够在需要时循环回到表单中的第一个文本以寻求说明。

所以如果用户有这种可能性（虽然我不认为它已经实现了），如果没有form标签，它不会找到任何东西。

【讨论】：

好点。说得通。我想知道是否有另一种方法可以在不使用表单标签的情况下解决这个问题。感谢您的意见。
就像斯蒂芬说的那样，您可以将fieldset 与legend 标签一起使用，但它需要两个标签而不是一个。我真的很喜欢辅助技术可以知道表格从哪里开始以及表格在哪里结束的想法。

【解决方案3】：

这不是必需的。您可能想要概述您的表单，以便可以轻松导航到，即：

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

如果您这样做，则屏幕阅读器用户可以使用他/她的区域导航键轻松导航到表单。他/她很容易知道表格的开始和结束位置。
我重申，这不是必需的，它只是让屏幕阅读器用户更舒服。但是，如果您不想将他们的注意力吸引到整个表单上，那就别管这个了，不要听从这个建议。

【讨论】：