Rollenattribut in HTML

1. Einführung in das role-Attribut in HTML
2. Verwenden Sie das role-Attribut für Barrierefreiheit in HTML

In diesem Artikel stellen wir das HTML-Attribut role zusammen mit seinem Zweck vor.

Einführung in das role-Attribut in HTML

Das Attribut role in HTML fällt unter die Spezifikation WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications). Der Hauptzweck von WAI-ARIA besteht darin, die Zugänglichkeit der Webschnittstelle zu verbessern, um Menschen mit Behinderungen zu unterstützen.

Damit kann der Bildschirmleser die von uns bereitgestellten Informationen verwenden, um den Inhalt eines HTML-Dokuments zu lesen. Das Attribut role definiert die Rolle eines HTML-Elements, das die Semantik beschreibt.

Lassen Sie uns zunächst den Unterschied zwischen semantischen und nicht-semantischen HTML-Elementen verstehen. Die Elemente wie <p>, <table> und <li> sind das semantische Element, das die Bedeutungen repräsentiert.

Es konzentriert sich mehr auf seine Funktionalität als auf sein Aussehen. Die spezifische Bedeutung des Elements wird dem Browser und dem Entwickler präsentiert.

Beispielsweise erstellt das Tag <p> Absätze.

Andererseits sind nicht-semantische HTML-Elemente solche Elemente, deren Inhalt keine klare Erklärung hat. Beispiele sind die Tags wie <div> und <span>.

Solche Tags enthalten keine Informationen über den darin enthaltenen Inhalt. Mit anderen Worten, sie haben keine Semantik.

Das Attribut role verleiht den nicht-semantischen Elementen in HTML Semantik. Wir können die Rolle für ein Element im Format role="role_type" schreiben.

role_type sind hier die in ARIA spezifizierten Rollen. In den folgenden Abschnitten sehen wir uns die verschiedenen Anwendungsfälle des Attributs Rolle an.

Verwenden Sie das role-Attribut für Barrierefreiheit in HTML

Einer der Hauptzwecke des Attributs Rolle ist die Bereitstellung von Zugänglichkeit, insbesondere für sehbehinderte Benutzer. Bei einem Screenreader liest das Attribut role den genauen Zweck bzw. das Verhalten des jeweiligen Elements vor.

Betrachten wir ein Szenario, in dem der Benutzer der Webanwendung sehbehindert ist. Wir müssen eine Schaltfläche erstellen, die den Benutzer anmeldet.

Das Framework erlaubt uns jedoch nicht, das Element <button> zu verwenden. Trotz der Unfähigkeit des Frameworks können wir es dennoch mit dem <a>-Tag ermöglichen.

Wir können der sehbehinderten Person jedoch nicht sagen, dass es eine Schaltfläche zum Anmelden gibt, es sei denn, wir verwenden das Attribut Rolle.

In einer solchen Situation können wir das Attribut role verwenden, um den Link als Schaltfläche zu definieren. Wir können dies tun, indem wir den Wert des Attributs Rolle als Schaltfläche schreiben.

Als Ergebnis liest der Screenreader dem Benutzer vor, dass Login ein Button ist. Somit kann er sich in das System einloggen.

Wir können die Erweiterung Screen Reader aus dem Chrome Web Store für den Chrome-Browser hinzufügen. Wenn der Benutzer das Tag <a> über die Tastatur navigiert, liest der Screenreader Login als Schaltfläche.

Beispielcode:

<a href="#" role="button"> Login </a>