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 章節和大綱