ARIA: Rolle separator

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

Elemente mit der Rolle separator haben implizit den aria-orientation Wert horizontal.

Ein nicht fokussierbarer Separator ist ein statisches Strukturelement, das verwendet werden kann, um visuell zwei Gruppen von Menüpunkten in einem Menü zu trennen oder um eine horizontale Linie zwischen zwei Abschnitten einer Seite bereitzustellen. Thematische Trennzeichen, die nicht fokussierbar sind, können dennoch von einem Bildschirmleser wahrgenommen werden, wenn ein Lesecursor verwendet wird, der nicht auf den Fokus angewiesen ist.

<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 Blogposts. Der Autor hätte auch ein semantisches thematisches Trennzeichen <hr> verwenden und es mit CSS blau gestalten können (und das Bild nicht ändern müssen, wenn er das Thema des Blogs ändert), oder der Autor hätte jeden Beitrag im semantischen <article> Element einschließen 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 Rolle separator kann verwendet werden, um das Element als visuellen Trenner zwischen Gruppen von Elementen in einem Menü zu identifizieren, beispielsweise Gruppen von menuitemradio oder menuitemcheckbox Elementen.

Wenn der Separator fokussierbar ist und eine sichtbare Grenze zwischen zwei Inhaltsabschnitten bietet und dem Benutzer ermöglicht, die relative Größe der Abschnitte durch Ändern seiner Position zu ä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 enthalten sein, wenn sie nicht auf die Standardwerte 0 bzw. 100 gesetzt sind.

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

Es gibt einige Arten von Benutzeroberflächenkomponenten, die, wenn sie in einer Plattform-Barrierefreiheits-API dargestellt werden, nur Text enthalten können. Barrierefreiheits-APIs haben keine Möglichkeit, semantische Elemente innerhalb eines separator darzustellen. Um mit dieser Einschränkung umzugehen, wenden Browser automatisch die Rolle presentation auf alle Nachfahrenelemente eines separator an, da es eine Rolle ist, 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 Nachfahren von separator präsentational sind, ist der folgende Code äquivalent:

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

Aus der Perspektive eines Benutzers von unterstützender Technologie existiert die Überschrift nicht, da die vorherigen Code-Snippets äquivalent zu folgendem sind im Barrierefreiheitsbaum:

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

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

Standardmäßig wird der Trenner für die separator Rolle als horizontal angenommen. Der Wert kann eingeschlossen und auf horizontal, undefiniert (der Standard für andere Rollen, es sei denn, 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.

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 gleich oder größer als aria-valuemin ein.

aria-valuetext

Wenn der Separator fokussierbar ist und aria-valuenow dem Benutzer keine nützlichen Informationen bietet, wird der Inhalt von aria-valuetext anstelle des aria-valuenow Wertes vorgelesen.

• Thematische Trennlinie HTML <hr>
• Beispiel eines Separators in einer Menüleiste