ARIA: separator Rolle

Ein Separator ist ein Trenner, der Abschnitte von Inhalten oder Gruppen von Menüelementen trennt und unterscheidet. Es gibt zwei Arten von Separatoren: eine statische Struktur, die eine sichtbare Grenze bietet, identisch mit dem HTML-Element <hr>, und ein fokussierbares, bewegliches Widget.

Elemente mit der Rolle separator haben einen impliziten aria-orientation-Wert von horizontal.

Ein nicht-fokussierbarer Separator ist ein statisches Strukturelement, das verwendet werden kann, um visuell zwei Gruppen von Menüelementen in einem Menü zu trennen oder eine horizontale Linie zwischen zwei Abschnitten einer Seite bereitzustellen. Thematische Trennungen, die nicht fokussierbar sind, können dennoch von einem Bildschirmleser-Benutzer wahrgenommen werden, wenn ein Lesecursor verwendet wird, der nicht von der Fokussierung abhängt.

<h2>My first blog post</h2>
…
<img src="blueline.gif" role="separator" alt="" />
<h2>Two years later, my second post</h2>
…

Im Beispiel erstellt ein Bild einen visuellen Trenner zwischen zwei Blogbeiträgen. Der Autor hätte ein semantisches thematisches Trennelement <hr> verwenden und es mit CSS stilisieren können, um es blau darzustellen (und muss das Bild nicht ändern, wenn das Thema des Blogs geändert wird), oder der Autor hätte jeden Beitrag in das semantische <article> -Element einbetten können oder beides.

<section role="feed">
  <article>
    <h2>My first blog post</h2>
    …
  </article>
  <hr />
  <article>
    <h2>Two years later, my second post</h2>
    …
  </article>
</section>

[role="feed"] > hr {
  height: 3px;
  background-color: blue;
}

Ein zugänglicher Name ist nicht erforderlich.

Die Separator-Rolle kann verwendet werden, um das Element als visuellen Trenner zwischen Gruppen von Elementen innerhalb eines Menüs zu identifizieren, z. B. Gruppen von menuitemradio- oder menuitemcheckbox-Elementen.

Wenn der Separator fokussierbar ist und eine sichtbare Grenze zwischen zwei Inhaltsabschnitten bietet und es dem Benutzer ermöglicht, die relative Größe der Abschnitte, die er trennt, durch Ändern seiner Position zu verändern, muss der Wert von aria-valuenow auf eine Zahl gesetzt werden, die die aktuelle Position des Separators widerspiegelt, und der Wert muss aktualisiert werden, wenn er sich ändert. Die Attribute aria-valuemin und aria-valuemax sollten ebenfalls aufgenommen werden, wenn sie nicht auf die Standardwerte 0 bzw. 100 gesetzt sind.

Ein zugänglicher Name, mit aria-label, sollte einbezogen werden, wenn es mehr als einen fokussierbaren Separator gibt.

Es gibt einige Arten von Benutzeroberflächenkomponenten, die bei der Darstellung in einer Plattform-Zugänglichkeits-API nur Text enthalten können. Zugänglichkeits-APIs haben keine Möglichkeit, semantische Elemente in einem separator darzustellen. Um dieses Problem zu umgehen, wenden Browser automatisch die Rolle presentation auf alle untergeordneten Elemente eines separator-Elements an, da es sich um eine Rolle handelt, die keine semantischen Kinder unterstützt.

Betrachten Sie zum Beispiel das folgende separator-Element, das eine Überschrift enthält.

<div role="separator"><h3>Title of my separator</h3></div>

Da Nachkommen von separator präsentationell sind, ist der folgende Code äquivalent:

<div role="separator"><h3 role="presentation">Title of my separator</h3></div>

Aus der Sicht eines Benutzers von unterstützender Technologie existiert die Überschrift nicht, da die vorherigen Codebeispiele dem folgenden im Zugänglichkeitsbaum entsprechen:

<div role="separator">Title of my separator</div>

aria-orientation (Standard ist horizontal für Separator)

Standardmäßig wird angenommen, dass der Trenner für separator-Rollen horizontal ist. Der Wert kann eingeschlossen und auf horizontal, undefiniert (der Standard für andere Rollen, sofern nicht anders angegeben) oder vertikal gesetzt werden.

aria-valuenow

Wenn der Separator fokussierbar ist und einen bekannten Wert hat, definiert aria-valuenow den aktuellen Wert. Wenn nicht fokussierbar oder der Wert unbekannt ist, schließen Sie dieses Attribut nicht ein.

aria-valuemin (Standard ist 0)

Wenn der Separator fokussierbar ist und der Mindestwert nicht 0 ist, schließen Sie den Mindestwert mit aria-valuemin ein. Wenn der

aria-valuemax (Standard ist 100)

Wenn der Separator fokussierbar ist und der Höchstwert nicht 100 ist, schließen Sie aria-valuemax mit einem Wert ein, der gleich oder größer als aria-valuemin ist.

aria-valuetext

Wenn der Separator fokussierbar ist und aria-valuenow nicht optimal ist, um dem Benutzer nützliche Informationen bereitzustellen, wird der Inhalt von aria-valuetext anstelle des aria-valuenow-Wertes vorgelesen.

• Thematischer Trennstrich HTML <hr> Element
• Beispiel für Separator in einer Menüleiste