ARIA：搜尋框角色

searchbox 角色表示元素是一種用於指定搜尋條件的 textbox 型別。

描述

當文字框位於具有角色 search 的元素中時，可以使用 searchbox 代替 textbox。searchbox 在語義上等同於 HTML 的 <input> 型別為 search 的元素，即 <input type="search">，如果可能，應該優先使用後者。

searchbox 必須具有可訪問的名稱。如果 searchbox 角色應用於 HTML <input> 元素，則應使用關聯的 <label>。否則，如果存在可見標籤，請使用 aria-labelledby，如果不存在可見標籤，請使用 aria-label。

螢幕閱讀器將宣佈“搜尋框”、“搜尋編輯”或“搜尋欄位”，以及可訪問的名稱。如果標籤中包含“搜尋”，這可能會顯得重複。

示例

html
<div tabindex="0" aria-label="search" role="searchbox" contenteditable></div>

雖然上述程式碼有效，但對於螢幕閱讀器使用者來說，以下程式碼更簡單、更簡潔，並且減少了冗餘

html
<input type="search" />

以下是一個包含搜尋框和按鈕、ARIA 即時區域以及用於搜尋結果的容器的搜尋表單。

html
<form role="search">
  <input
    type="search"
    role="searchbox"
    aria-description="search results will appear below"
    id="search"
    value="" />
  <label for="search">Search this site</label>
  <button>Submit search</button>
</form>
<div aria-live="polite" role="region" aria-atomic="true">
  <div class="sr-only"></div>
</div>
<div id="search-results"></div>

如果表單是 search 並且標籤指示元素是搜尋，則包含 role="searchbox" 可能會導致輔助技術宣佈類似於“搜尋搜尋此網站搜尋框”的內容，這是重複的。包含 role="searchbox" 並非必要

html
<input
  type="search"
  aria-description="search results will appear below"
  id="search"
  value="" />

規範

規範
可訪問富網際網路應用程式 (WAI-ARIA)
# searchbox

另請參閱