ARIA: vai trò searchbox

Mô tả

searchbox có thể được dùng thay cho vai trò textbox khi hộp văn bản nằm trong một phần tử có vai trò search. searchbox là phần tương đương ngữ nghĩa với <input> HTML kiểu search, <input type="search">, và nếu có thể thì nên dùng phần tử đó thay thế.

searchbox phải có một tên khả năng tiếp cận. Nếu vai trò searchbox được áp dụng cho một phần tử HTML <input>, nên dùng một <label> liên kết. Nếu không, hãy dùng aria-labelledby nếu có nhãn hiển thị, hoặc aria-label nếu không có nhãn hiển thị.

Trình đọc màn hình sẽ thông báo "search box", "search edit", hoặc "search field" cùng với tên khả năng tiếp cận. Điều này có thể lặp thừa nếu từ "search" đã có trong nhãn.

Ví dụ

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

Mặc dù đoạn trên hợp lệ, sẽ đơn giản hơn, ngắn gọn hơn và ít thừa hơn với người dùng trình đọc màn hình nếu viết:

<input type="search" />

Đoạn sau là một biểu mẫu tìm kiếm với searchbox và nút, live region ARIA, và vùng chứa cho kết quả tìm kiếm.

<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>

Việc bao gồm role="searchbox" khi form là một search và nhãn cho biết phần tử là tìm kiếm có thể khiến công nghệ hỗ trợ thông báo theo kiểu "search search this site search box", vốn là thừa. Không cần thêm role="searchbox":

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

Đặc tả

Xem thêm

• <input type="search">
• ARIA: vai trò search
• ARIA: vai trò textbox