ARIA: search 角色

描述

search 角色是 地标 角色，可以添加到包含组成文档或应用程序搜索功能的所有元素的容器元素上，包括后代的 <input type="search">。如果文档包含多个搜索，每个搜索都应有一个唯一的标签，除非它们是同一搜索的重复，则使用相同的名称。有一个 search 类型的 input，尽管它本身并不定义搜索地标。使用 <search> 是定义搜索地标的替代方法。

示例

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

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

可访问性考虑

地标角色 intended to be used sparingly, to identify larger overall sections of the document. Using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page. （地标角色intended to be used sparingly, to identify larger overall sections of the document. 使用过多的地标角色可能会在屏幕阅读器中产生“噪音”，从而难以理解页面的整体布局。）

最佳实践

优先使用 HTML

使用 <search> 元素将自动传达该元素具有 search 角色的信息。如果可能，请优先使用语义化的 <search> 元素而不是 search 角色。

如果您的 search 类型的 <input> 已经包含在 <form> 中，那么将表单包裹在另一个 <search> 元素中可能是不必要的标记。在这种情况下，在 <form> 本身使用 role="search" 是可以接受的。

标记地标

多个地标

如果文档中有多个 search 地标角色，请为每个地标提供一个标签。此标签将允许辅助技术用户能够快速理解每个地标的目的。

<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 地标角色在文档中重复出现，并且两个地标的内容相同，请为每个地标使用相同的标签。例如，在页面顶部和底部重复站点范围的搜索。

<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" 的内容可能会被冗余地宣布为“sitewide search search”。

规范

另见

• <form> 元素
• <input> 元素
• <search> 元素
• <input type="search">
• 使用 HTML 章节和大纲