ARIA：搜索角色

search 角色用于标识搜索功能；页面、站点或站点集合的搜索部分。

html
<form role="search">
  <!-- search input -->
</form>

描述

search 角色是地标角色，可以添加到包含所有元素的容器元素中，这些元素组合起来形成了文档或应用程序的搜索功能，包括后代(<input type="search">)。如果文档包含多个搜索，每个搜索都应具有唯一的标签，除非它们是相同的搜索重复，则使用相同的名称。存在input 类型为 search)，但它本身并不定义搜索地标。使用<search> 是定义搜索地标的另一种方法。

示例

当<form> 是搜索表单时，使用 search 角色而不是form 角色。

html
<form id="search" role="search">
  <label for="search-input">Search this site</label>
  <input type="search" id="search-input" name="search" spellcheck="false">
  <input value="Submit" type="submit">
</form>

无障碍问题

地标角色 旨在谨慎使用，以标识文档中更大的整体部分。使用过多的地标角色会为屏幕阅读器带来“噪音”，从而难以理解页面的整体布局。

最佳实践

优先使用 HTML

使用<form> 元素结合 role="search" 的声明将提供最大的支持。

标记地标

多个地标

如果文档中存在多个 search 地标角色，请为每个地标提供标签。此标签将使辅助技术用户能够快速了解每个地标的用途。

html
<form id="site-search" role="search" aria-label="Sitewide">
  <!-- search input -->
</form>

…

<form id="page-search" role="search" aria-label="On this page">
  <!-- search input -->
</form>

重复地标

如果文档中的 search 地标角色在文档中重复，并且两个地标具有相同的内容，请为每个地标使用相同的标签。这方面的例子是在页面顶部和底部重复站点范围搜索。

html
<header>
  <form id="site-search-top" role="search" aria-label="Sitewide">
    <!-- search input -->
  </form>
</header>

…

<footer>
  <form id="site-search-bottom" role="search" aria-label="Sitewide">
    <!-- search input -->
  </form>
</footer>

冗余描述

屏幕阅读器将宣布地标的角色类型。因此，您无需在其标签中描述地标是什么。例如，role="search" 的声明与aria-label="Sitewide search" 可能被冗余地宣布为“站点范围搜索搜索”。

规范

规范
可访问的富互联网应用程序 (WAI-ARIA)
# 搜索
未知规范

另请参阅