ARIA: searchbox-Rolle
Die searchbox
-Rolle kennzeichnet ein Element als eine Art textbox
, die für die Angabe von Suchkriterien vorgesehen ist.
Beschreibung
Die searchbox
kann anstelle einer textbox
verwendet werden, wenn sich das Textfeld innerhalb eines Elements mit der Rolle search
befindet. Eine searchbox
ist das semantische Äquivalent zu HTMLs <input>
vom Typ search
, <input type="search">
, das nach Möglichkeit stattdessen verwendet werden sollte.
Die searchbox
muss einen zugänglichen Namen haben. Ist die searchbox
-Rolle auf ein HTML-<input>
-Element angewendet, sollte ein zugeordnetes <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 "Suchfeld", "Sucheingabefeld" oder "Suchbereich" plus den zugänglichen Namen ankündigen. Dies kann redundant sein, wenn "Suche" im Label enthalten ist.
Beispiele
<div tabindex="0" aria-label="search" role="searchbox" contenteditable></div>
Obwohl das oben Genannte gültig ist, ist es einfacher, prägnanter und für den Screenreader-Benutzer weniger redundant, Folgendes zu schreiben:
<input type="search" />
Das Folgende ist ein Suchformular mit einem Suchfeld und Button, einem ARIA-Live-Bereich und einem Container für die 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 Einschließen von role="searchbox"
wenn das Formular eine search
ist und das Label darauf hinweist, dass das Element eine Suche ist, kann dazu führen, dass unterstützende Technologien etwas in der Art von "Suche diese Seite Suchfeld" ankündigen, was redundant ist. Die Einbeziehung 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 |