HTML/Attribute/role

Mit dem role-Attribut können Sie sogenannte Landmark-Roles als Orientierungspunkte verwenden. Da Screenreader so die einzelnen Teile der Webanwendung erkennen, können diese dann per Tastendruck ("R" in JAWS) angesteuert werden.

erlaubte Werte	application: eigenständige Webanwendung banner: Site-spezifischer Inhalt, beispielsweise der Titel der Seite und das Logo complementary: unterstützender Inhalt für den Hauptinhalt, aber auch für sich alleinstehend, wenn er vom Hauptinhalt getrennt wird, beispielsweise das angezeigte Wetter auf einem Portal contentinfo: Fußnoten, Copyright-Hinweise, Voreinstellungen, rechtliche Hinweise und Ähnliches form: Formulare main: Inhalt mit direktem Bezug zum Hauptinhalt oder Inhalt der zum zentralen Inhalt des jeweiligen Dokuments führt. navigation: Inhalt, der Links enthält, um durch das Dokument und/oder zu ähnlichen Dokumenten zu navigieren none: für Dekorationsgrafiken (früher role="presentation") search: Suchfunktion der Website ...und viele mehr
default-Wert	je nach Element unterschiedlich; siehe Default-Rollen
erlaubt in	allen Elementen
Browsersupport	Details bei caniuse.com: {{{caniuse}}}

Beispiel

<use href="#logo" role="banner"/> <text role="heading">Überschrift</text> <g role="main"> <text>Unterüberschrift <tspan>Text</tspan> <tspan>... mehr Inhalt<tspan> </text> </g> <text role="contentinfo"> Sonstiges </text>

In diesem Beispiel wurde den SVG-Elementen landmark-roles in Form von ARIA-Attributen gegeben. So können Screenreader die Text-Elemente anhand ihrer Semantik erkennen.

Empfehlung: Verwenden Sie role-Attribute, um Screenreadern (und ihren Nutzern) einen barrierefreien Zugang zu Ihrer Webseite zu ermöglichen.

• Wenn es ein passendes HTML-Element gibt, verwenden Sie dieses ohne Angabe einer WAI-ARIA-Rolle.
• Verändern Sie die Semantik der HTML-Elemente nicht.
• Sollten Elemente nicht bestimmungsgemäß eingesetzt werden, wie es zum Beispiel bei Layout-Tabellen der Fall ist, entfernen Sie die Semantik des Elements durch role="none".

Siehe auch

• WAI-ARIA
  • HTML/Attribute/role/default-Rollen

Weblinks

• W3C: WAI-ARIA - The Roles model