HTML/Attribute/role

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

Weblinks