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

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)。