ARIA: searchbox Rolle
Die searchbox Rolle zeigt an, dass ein Element eine Art von textbox ist, das für die Angabe von Suchkriterien vorgesehen ist.
Beschreibung
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> des Typs search, <input type="search">, welches nach Möglichkeit verwendet werden sollte.
Die searchbox muss einen zugänglichen Namen haben. Wenn die searchbox Rolle auf ein HTML-Element <input> angewendet wird, sollte ein zugehöriges <label> verwendet werden.
Andernfalls verwenden Sie aria-labelledby, wenn ein sichtbares Etikett vorhanden ist, oder aria-label, wenn kein sichtbares Etikett vorhanden ist.
Der Screenreader wird "Suchfeld", "Suchbearbeitung" oder "Suchfeld" zusammen mit dem zugänglichen Namen ankündigen. Dies kann redundant sein, wenn "Suche" im Etikett enthalten ist.
Beispiele
<div tabindex="0" aria-label="search" role="searchbox" contenteditable></div>
Während das obige gültig ist, ist es einfacher, prägnanter und weniger redundant für den Screenreader-Nutzer zu schreiben:
<input type="search" />
Das Folgende ist eine Suchform mit einer searchbox 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>
Die Aufnahme von role="searchbox" wenn das Formular eine search ist und das Etikett anzeigt, dass das Element eine Suche ist, kann dazu führen, dass unterstützende Technologien etwas wie "search search this site search box" ankündigen, was redundant ist. Die Aufnahme von role="searchbox" ist nicht notwendig:
<input
type="search"
aria-description="search results will appear below"
id="search"
value="" />
Spezifikationen
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # searchbox |