如果它只是一个搜索功能，我是否需要将我的输入字段包装在一个表单中？

Question

我刚刚注意到，即使是 Google 也不使用表单来包装他们的输入字段。我认为这在可访问性方面很糟糕，因为屏幕阅读器将不知道它是什么？

Answer 1

从纯屏幕阅读器的角度来看，<form> 是将一组控件组合在一起的一种方式，如果您为表单指定标签，例如 <form aria-label="contact info">，则效果最佳。

如果您有一个简单的搜索字段，并且可能有一个关联的搜索按钮，则不一定需要 <form>。但是，您应该使用 role="search" 将您的元素嵌套在搜索地标中。

<div role="search">
  <input aria-label="search term">
  <button aria-label="search">
    <i class="magnifier"></i>
  </button>
</div>

看起来像文字“搜索”在该代码片段中出现了很多，但“搜索”唯一一次必须按字面显示是role 属性。

输入的aria-label 可以是您想要的任何字符串。当焦点移动到该字段时，屏幕阅读器将读取它。如果您的<input> 有<label>，则不需要aria-label。

<button> 只有一个放大镜图标，没有文字，因此屏幕阅读器也需要aria-label。如果您的图标是<img> 而不是<i>，您可以在img 的alt 属性中指定按钮的标签，在这种情况下<button> 不需要aria-label。

<div role="search">
  <label for="findit">search term</label>
  <input id="findit">
  <button>
    <img src="magnifier.jpg" alt="search">
  </button>
</div>

所以简单的答案是“不”，您不必将搜索放在<form> 中。但强烈建议使用role="search" 将其包装在“搜索”地标中。

Answer 2

您不一定需要，但您应该始终使用表单标签从表单元素提交任何类型的数据，谷歌也这样做（如果您在 DOM 中遍历，您会发现）。

不过，您可以使用 AJAX 提交数据，但不能在 JavaScript 未运行时提交。