我们应该如何无障碍地使用 HTML 搜索标记？

<search> 标记仅在 2023 年末才能在大多数浏览器上获得完全支持。

因此，我在等待更好的可用性和直接执行以下操作之间进行了权衡：

<div role="search">；
  ...搜索输入...
</div>；

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

现代浏览器对未知标记的宽容度很高，因此在未实现该功能的浏览器中使用 <search> 不会破坏任何内容。但是，作为无障碍地标，它将毫无用处。

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

<search>；
   <div role="search">；
      ...搜索输入...
   </div>；
</search>；

or

<search role="search">；
   ...搜索输入...
</search>；

在我的案例中，我需要一个相关的地标，因为我使用的不是 <input type="search"> 而是 <select> s，这对于 <search> 标记规格来说是完全没有问题的。

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

以下是关于如何标记搜索表单以获得最佳辅助功能的一些想法，同时还要考虑到对新 <search> 元素的支持：

最佳方法：

1. 对支持它的浏览器使用 <search> ，并添加一个带有 role="search" 的回退 div 。 这可确保在支持的浏览器中实现语义化 HTML 和辅助功能，同时为旧浏览器提供回退。

html <search> <div role="search"> <label for="search-input">搜索：</label> <select id="search-input"> <option value="">选择一个选项</option> <option value="option1">选项 1</option> <option value="option2">选项 2</option> </select> <button type="submit">搜索</button> </div> </search>

为什么这种方法有效：

• 渐进增强： 它利用了现代浏览器中的 <search> ，同时为不支持它的浏览器提供可靠的回退。
• 清晰的语义： 它清楚地将表单标识为搜索功能，这对辅助技术很有用。
• 稳健性： 即使在不支持 <search> 的浏览器中删除外部 <search> 元素，内部 role="search" 仍能确保辅助功能。

需要避免的事项：

• 不要同时使用 <search role="search"> 。 这是多余的，并且可能会在某些辅助技术中造成混淆。请记住，HTML 的目标是具有语义性和非冗余性。

其他提示：

• 始终使用 <label> 元素为的搜索输入提供标签。 确保标签通过 for 属性链接到输入。
• 考虑添加一个提交按钮，即使对于基于下拉列表的搜索也是如此。 这为所有用户提供了更清晰的操作路径。

通过遵循这些方法，可以创建一个既对支持它的浏览器具有前瞻性又对旧浏览器具有向后兼容性的可访问搜索表单。