Question

<input type="search" placeholder="search" />

当搜索字段聚焦时，屏幕阅读器会忽略这一点！要添加什么属性，以便屏幕阅读器说“这是一个搜索框”谢谢。

Answer 1

使其可访问的方法是使用input元素周围的文本和标记而不是属性。这样，您就不依赖于对某些特殊属性的任何特定支持（这些属性因浏览器而异）。例如：

<form action=... role="search">
<h2>Search this site</h2>
<label for="q">Keywords:</label>
<input type="search" id="q" name="q">
<input type="submit" value="Search">
</form>

然后可以将输入字段说成普通文本字段，因为用户已经知道它是用于输入搜索的关键字。

如果由于场地布局要求而被迫使用没有标签的小输入框，那么可访问性将不可避免地降低。您可以尝试帮助某些用户使用某些可能被某些浏览器识别和使用的属性，例如

<input type="search" name="q" placeholder="keywords"
       title="Keywords for a site-wide search"
       aria-label="Keywords for a site-wide search">

注意：placeholder attribute应包含表示预期输入提示的文本，而不是某些功能的通用名称。

role和aria-*属性的参考：Using WAI-ARIA in HTML（WD）。

输入类型搜索与辅助功能兼容？

1 个答案: