我们应该如何以可访问的方式使用HTML的搜索标签？

Question

到 2023 年末，大多数浏览器才完全支持

<search>

标签。

所以我在等待更好的可用性和只是做之间保持平衡：

<div role="search">
  ...search inputs...
</div>

但我认为我们必须推广新的专用地标。

现代浏览器对未知标签非常宽容，因此在尚未实现它的浏览器中使用

<search>

不会破坏任何内容。然而，它作为一个可访问的地标是没有用的。

我想过两种折衷的解决方案，但它们显然是多余的：

<search>
   <div role="search"> 
      ...search inputs... 
   </div>
</search>

或

<search role="search">
   ...search inputs... 
</search>

就我而言，我需要一个相关的地标，因为我没有使用

<input type="search">

，而是使用

<select>

，这对于

<search>

标签规格来说非常好。

从可访问性的角度来看，上述哪个选项最有效，尤其是屏幕阅读器支持？

Answer 1

<search role="search">

是最好的方法。

一般来说，创建有弹性、面向未来的网站的最佳方法是基于当前规范进行工作，并使用 polyfills 来弥补浏览器支持的缺乏、不一致或浏览器错误。

自从第一个 HTML 5 元素出现以来，这是一个很好的方法。它允许逐渐减少并最终删除填充，同时始终拥有相当干净的代码。

说到角色，polyfill只需添加一个冗余（根据标准）

role

属性即可完成。

<search>

元素不定义任何浏览器行为，因此添加

role

就足够了。

---

从其他环境中学习：

<label>Registration number
  <input type="text" inputmode="numeric" pattern="/d+">`
</label>

是在触摸屏上触发数字键盘的最佳实践。

inputmode

还没有支持，所以模式解决了它。您仍然会包含它，因为它已经标准化了。这样，网站以后就能正常工作了。

---

<search>
  <div role="search"> 

不是一种选择，因为它可能会添加 2 个搜索地标，一个在另一个内。它也不符合标准。