ARIA: searchbox-Rolle

Die searchbox kann anstelle von textbox verwendet werden, wenn das Textfeld innerhalb eines Elements mit der Rolle search ist. Eine searchbox ist das semantische Äquivalent zu HTMLs <input> vom Typ search, <input type="search">, das, wenn möglich, stattdessen verwendet werden sollte.

Die searchbox muss einen zugänglichen Namen haben. Wenn die searchbox-Rolle auf ein HTML-<input>-Element angewendet wird, sollte ein zugehöriges <label> verwendet werden. Andernfalls verwenden Sie aria-labelledby, wenn ein sichtbares Label vorhanden ist, oder aria-label, wenn kein sichtbares Label vorhanden ist.

Der Screenreader wird "search box", "search edit" oder "search field" plus den zugänglichen Namen ankündigen. Dies kann redundant sein, wenn "search" im Label enthalten ist.

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

Obwohl das obige Beispiel gültig ist, ist es einfacher, prägnanter und weniger redundant für den Screenreader-Benutzer, Folgendes zu schreiben:

<input type="search" />

Das Folgende ist ein Suchformular mit einer Suchbox und einem Button, einem ARIA-Live-Bereich und einem Container für Suchergebnisse.

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

Das Einfügen von role="searchbox" wenn das Formular eine search ist und das Label angibt, dass das Element eine Suche ist, kann dazu führen, dass unterstützende Technologien etwas in der Art von "search search this site search box" ankündigen, was redundant ist. Das Einfügen von role="searchbox" ist nicht notwendig:

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

• <input type="search">
• ARIA: search-Rolle
• ARIA: textbox-Rolle