ARIA Zustände & Eigenschaften
Schematische Darstellung: Person mit weißem Stock gelangt über ein Boddenleitsystem zu einem Aufmerksamkeitsfeld

aria-roledescription

Zuletzt geändert:

Mit dem Attribut aria-roledescription kann über definierte Rollen hinaus ein individueller Name festgelegt werden. Dieser Name kann von assistierenden Technologien als Beschriftung für die Rolle angewendet werden.

Definition und Verwendung

Die WAI definiert das Attribut folgendermaßen:

„Definiert eine von Menschen lesbare, von Autor*innen eingegrenzte Beschreibung für die Rolle eines Elements.“

Der Begriff Element wird hier wie in Markup-Sprachen verwendet. (HTML, SVG)

Erläuterungen zur Definition

Das Attribut weist folgende Merkmale auf:

Anforderungen an assistierende Technologien

Assistierende Technologien sollten die Funktionalitäten der jeweiligen Rolle des Elements nicht ändern, sondern lediglich die Bezeichnung aus dem Wert des Attributs übernehmen. Es sollte also beispielsweise weiterhin möglich sein, Kurztasten zur Navigation zwischen Elementen zu verwenden, auch wenn die Rolle eine andere Bezeichnung hat.

JAWS scheint sich an diese Vorgabe zu halten.

Einsatzszenarien

Das Attribut sollte überwiegend nur folgenden Komponenten zugewiesen werden:

Technische Realisierung

Mit aria-roledescription wird keine neue Rolle festgelegt, sondern die Beschriftung einer vorhandenen Rolle modifiziert. Das Element muss also bereits über eine valide ARIA-Rolle zumindest implizit verfügen.

Als Wert ist eine frei gewählte Zeichenfolge (String) zulässig. Ein leerer Wert für das Attribut ist nicht zulässig.

Das Attribut ist insofern performativ, als es die Bezeichnung der Rolle eines Elements ändert.

Die Bezeichnung der Rolle besteht aus dem Wert des Attributs.

Der Inhalt der Komponente wird mit einem aria-label oder aria-labelledby-Attribut angegeben.

<section
  aria-roledescription="[Bezeichnung der Rolle]"
  aria-label="[Beschreibung des Inhalts]">
  [Inhalte der Komponente ]
</section>

Beispiele

Container für Karussell

Für Karusselle steht keine Rolle im ARIA-Portfolio zur Verfügung. Mit folgendem Code wird eine entsprechende Rolle explizit für einen Inhalt festgelegt. Der Bereich wird hier durch Referenzieren auf die Abschnittsüberschrift beschriftet:

<section
  aria-roledescription="Karussell"
  aria-labelledby="h-videos">
  <h3 id="h-videos" >Aktuelle Videos</h3>
  [Steuerelemente und Inhalte eines Karussells ]
</section>

JAWS 2026 gibt diesen Code in der Standardkonfiguration folgendermaßen wieder:

Aktuelle Videos Karussell
Überschrift Ebene 3 Aktuelle Videos
[Inhalte des Abschnitts]
Aktuelle Videos Karussell Ende

Abschnitt als Beispiel kennzeichnen

Auch für Beispiele steht keine Standardrolle zur Verfügung. Visuell werden Elemente, die als illustrative Beispiele dienen, oft abweichend vom Standarddesign einer Webseite dargestellt. Die Funktion eines Abschnitts mit illustrativen Elementen kann mittels aria- roledescription="Beispiel" technisch gekennzeichnet werden.

Hier dazu ein Praxisbeispiel:

Beispiel für eine Überschrift zur Kennzeichnung von Links zu externen Ressourcen

Barrierefreiheit und Nutzungsfreundlichkeit

Bedeutung und Auswirkungen von Rollen

Screen Reader lesen nicht nur den Text eines Elements vor, sondern greifen auch auf verfügbare Informationen, wie semantische Rollen zu. Damit wird nicht-sehenden Menschen ein Verständnis für die Bedeutung einer Komponente vermittelt.

Rollenzuweisungen durch HTML-Elemente oder ARIA-Anweisungen wirken sich in folgenden Bereichen auf die Barrierefreiheit aus:

Überschreiben von Standardrollen

Die zentrale Funktion des Attributs ist die Modifikation der Beschreibung einer Rolle. Erhalten Standardelemente einen anderen Namen, entsprechen sie nicht mehr dem Erfahrungshorizont von Nutzer*innen. Die Rolle von Steuerelementen und Seitenregionen sollte daher nicht überschrieben werden.

Problem der natürlichen Sprache

Standardbeschriftungen für ARIA-Rollen werden von assistierenden Technologien in deren eingestellter Standardsprache wiedergegeben. Ein Element aus dem HTML-Tag <button> oder mit dem ARIA-Attribut role="button" wird in einer englischsprachigen Konfiguration als button und in einer deutschsprachigen als Schalter wiedergegeben. Eine entsprechende sprachspezifische Beschriftung ist durch aria-roledescription nicht gegeben.