ARIA: searchbox 角色
searchbox 角色表示一個元素是用於指定搜尋條件的 textbox 型別。
描述
當文字框位於具有 search 角色的元素內時，可以使用 searchbox 代替 textbox。searchbox 在語義上等同於 HTML 的 search 型別的 <input>，即 <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 live region 以及搜尋結果容器的搜尋表單。
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 |