Question

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

Answer 1

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

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

Answer 2

从纯屏幕阅读器的角度来看，拥有<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可以是您想要的任何字符串。当焦点移到该字段时，屏幕阅读器将读取该内容。如果您的<label>有一个<input>，则不需要aria-label。

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

aria-label

因此，简单的答案是“否”，您不必将搜索放在<div role="search"> <label for="findit">search term</label> <input id="findit"> <button> <img src="magnifier.jpg" alt="search"> </button> </div>中。但是强烈建议您使用<form>将其包装在“搜索”界标中。

如果这只是搜索功能，是否需要将输入字段包装成表格？

2 个答案: