使搜索表单可访问:标签与aria-label对比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

可以说,最好的做法是使用<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