ARIA: search Rolle

Die search Rolle ist eine Landmarke, die dem Container-Element hinzugefügt werden kann, das alle Elemente umschließt, die zusammen die Suchfunktion des Dokuments oder der Anwendung bilden, einschließlich eines Nachfahren (<input type="search">). Wenn ein Dokument mehr als eine Suche enthält, sollte jede eine eindeutige Bezeichnung haben, es sei denn, es handelt sich um dieselbe wiederholte Suche, dann verwenden Sie denselben Namen. Es gibt einen input vom Typ search), allerdings definiert dieser allein keine Such-Landmarke. Die Verwendung von <search> ist eine alternative Möglichkeit, um eine Such-Landmarke zu definieren.

Wenn ein <form> ein Suchformular ist, verwenden Sie die search Rolle anstelle der form Rolle.

<form id="search" role="search">
  <label for="search-input">Search this site</label>
  <input type="search" id="search-input" name="search" spellcheck="false" />
  <input value="Submit" type="submit" />
</form>

Landmarkenrollen sind dazu gedacht, sparsam eingesetzt zu werden, um größere, übergreifende Abschnitte des Dokuments zu identifizieren. Die Verwendung zu vieler Landmarkenrollen kann in Screenreadern "Geräusche" erzeugen, was es schwierig macht, das gesamte Layout der Seite zu verstehen.

Die Verwendung des <form> Elements in Verbindung mit einer Deklaration von role="search" bietet den größten Support.

Mehrfache Landmarken

Wenn es mehr als eine search Landmarke in einem Dokument gibt, versehen Sie jede Landmarke mit einer Beschriftung. Diese Beschriftung ermöglicht es einem Nutzer von unterstützender Technologie, schnell den Zweck jeder Landmarke zu verstehen.

<form id="site-search" role="search" aria-label="Sitewide">
  <!-- search input -->
</form>

…

<form id="page-search" role="search" aria-label="On this page">
  <!-- search input -->
</form>

Wiederholte Landmarken

Wenn eine search Landmarke in einem Dokument wiederholt wird und beide Landmarken identischen Inhalt haben, verwenden Sie für jede Landmarke die gleiche Beschriftung. Ein Beispiel hierfür wäre die Wiederholung der standortweiten Suche oben und unten auf der Seite.

<header>
  <form id="site-search-top" role="search" aria-label="Sitewide">
    <!-- search input -->
  </form>
</header>

…

<footer>
  <form id="site-search-bottom" role="search" aria-label="Sitewide">
    <!-- search input -->
  </form>
</footer>

Redundante Beschreibungen

Screenreader geben die Art der Rolle der Landmarke bekannt. Aus diesem Grund müssen Sie in der Beschriftung nicht beschreiben, was die Landmarke ist. Zum Beispiel könnte eine Deklaration von role="search" mit einem aria-label="Sitewide search" redundant als „standortweite Suche Suche“ angekündigt werden.

• Das <form> Element
• Das <input> Element
• Das <search> Element
• <input type="search">
• Verwendung von HTML-Sektionen und -Umrissen