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/，我需要添加一个无法直观显示的标签，并对搜索按钮进行说明，如下所示： / p>

<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

可以说，最佳做法是使用<label>。它提供了一个更大的命中区域，并提供了一个视觉标签，当场变焦时，它不会消失（这是你的例子中发生的事情）。

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

aria-labelledby需要指向某些文本的id作为标签，因此如果您打算在此上下文中执行此操作，那么您可以回到使用{{1 }}

对于您的提交按钮，<label>属性是正确的选择，但不要冗长。

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

alt

<input type="text" value="" placeholder="Search" aria-label="Search"> <input type="image" src="/searchbutton.gif" alt="Submit">通过在您清除的字段中保留值来执行您要执行的操作。屏幕阅读器会将该字段宣布为“输入，文本，搜索”，将按钮宣布为“按钮，搜索”。简短，可操作的标签是最好的。

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

Answer 2

如果您想要访问（不仅仅是屏幕阅读器用户），您必须提供可见说明。

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

G167: Using an adjacent button to label the purpose of a field。
依赖placeholder字段上的input属性（但这不足以进行交互式调整，因为一旦字段填写后指令就会消失）

这不会阻止您为屏幕阅读器用户提供标签，可见与否：

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技术是您可以选择的最佳选择。

使搜索表单可访问：标签与aria-label对比aria-labelledby

2 个答案: