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 |