我们应该如何使用最新的HTML标签辅助功能呢？

Question

例如，

<search>

标签直到 2023 年末才在大多数浏览器上得到全面支持。

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

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

<search>

元素没有定义任何浏览器行为，因此该属性就足够了。

从其他环境中学习：

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

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

inputmode

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

<search>
  <div role="search">

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