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)
# 搜尋
未知規範

另請參閱