使搜索表单可访问：label vs aria-label vs aria-labelledby

Question

我的搜索表单的当前 HTML 如下所示：

<form action=“/search/” method="post">
<input onclick="this.value='';" type="text"  name="searchquery" id="searchbox"  value="Search this site” class="swap_value" />
<input type="image" src=“/images/searchbutton.gif" id="searchbutton" alt="" />
</form>

我想让搜索表单可访问。据我了解 W3.org 的可访问性：https://www.w3.org/WAI/tutorials/forms/labels/ 和 a11ymatters.com：http://www.a11ymatters.com/pattern/accessible-search/，我需要添加一个不会在视觉上显示的标签，并对搜索按钮进行描述，如下所示：

<form action=“#” method="post">
<label class=“search-label” for=“search”>Search this site:</label>
<input onclick="this.value='';" type="text"  name="searchquery" id="searchbox"  value="Search this site” class="swap_value" />
<input type="image" src=“/searchbutton.gif" id="searchbutton" alt=“Search Button“ />
</form>

使用添加的 CSS：

.search-label {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; 
}

W3.org 文章说您可以使用 label、aria-label 或 aria-labelledby 来标识表单控件，但它没有说明哪种方法是最佳实践。有谁知道哪个是首选/最佳实践？ alt 标签是否足以识别我的搜索按钮，还是也需要标签？

非常感谢！

Answer 1

如果您希望易于访问（不仅适用于屏幕阅读器用户），您必须提供可见说明。

这可以通过以下方式实现：

• G167: Using an adjacent button to label the purpose of a field。
• 依赖input 字段上的placeholder 属性（但这还不够，没有交互式调整，因为一旦字段被填满，说明就会消失）

这并不妨碍您为屏幕阅读器用户提供可见或不可见的标签：

• H44: Using label elements to associate text labels with form controls。如果您使用此解决方案，请不要隐藏文本。没有屏幕阅读器的人不会从这些说明中受益。

• H65: Using the title attribute to identify form controls when the label element cannot be used.

• ARIA6: Using aria-label to provide labels for objects。请注意，单独使用 ARIA 绝不是一个好主意，因为这不会为不使用屏幕阅读器的人提供说明。

请注意，为了获得更好的支持，您可以选择同时使用 H65 和 ARIA6 技术。

Answer 2

可以说，最佳实践是使用<label>。它提供了更大的点击区域，并提供了一个视觉标签，当该字段获得焦点时不会消失（这就是您的示例中发生的情况）。

由于设计有时会在视觉上隐藏标签文本，因此使用 <label> 并完全隐藏它并没有太大的好处。在这种情况下，在搜索表单的上下文中使用 aria-label 可能没问题。

aria-labelledby 需要指向某些文本的id 来充当标签，所以如果你打算在这种情况下这样做，那么你不妨回到使用<label>。

对于您的提交按钮，alt 属性是正确的使用方式，但不要冗长。

在你的情况下，你可以摆脱这个：

<input type="text" value="" placeholder="Search" aria-label="Search">
<input type="image" src="/searchbutton.gif" alt="Submit">

placeholder 通过在字段中留下一个值然后将其清除来完成您想要做的事情。屏幕阅读器会将字段宣布为“输入、文本、搜索”，将按钮宣布为“按钮、搜索”。简短、可操作的标签是最好的。

对于其他代码示例和示例，我创建了一个仅以图标开头的可访问搜索字段（应客户要求）：http://codepen.io/aardrian/pen/bVQzJj