Wofür wurde das Attribut roll hinzugefügt?

Das Attribut role wird in ARIA (Accessible Rich Internet Applications) verwendet, um den Typ der Benutzeroberflächenkomponente eines Elements explizit zu definieren. Dies hilft assistiven Technologien wie Screenreadern, die Funktion des Elements zu verstehen und diese Informationen an Nutzer mit Einschränkungen weiterzugeben. Es ergänzt die HTML-Semantik, insbesondere für Elemente, die keine eingebaute Semantik haben oder wenn die Standardsemantik nicht ausreicht.

Zum Beispiel:

Ein div-Element mit der Rolle button wird von einem Screenreader als Schaltfläche wahrgenommen, auch wenn es kein Standardverhalten oder HTML-Button-Semantik besitzt.

<div role="button" tabindex="0" aria-pressed="false">
  Klicke mich
</div>

Die Rolle navigation auf einem nav-Element (obwohl nav bereits eine eingebaute Navigationssemantik hat) kann in bestimmten Fällen die Interpretation verbessern.

<nav role="navigation">
  <ul>
    <li><a href="/">Startseite</a></li>
  </ul>
</nav>

Einige komplexe Widgets, die auf nicht semantischen Elementen basieren, erhalten ihre Rollen für eine korrekte Darstellung:

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Registerkarte 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Registerkarte 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Inhalt der Registerkarte 1.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Inhalt der Registerkarte 2.
</div>

Das role-Attribut klassifiziert Elemente nach ihrer Funktion und ihrem Zweck und sorgt für eine genauere und nützlichere Interaktion für Nutzer, die assistive Technologien verwenden. Es ist wichtig, es zusammen mit anderen ARIA-Attributen (z.B. aria-label, aria-expanded, aria-hidden) zu verwenden, die den Zustand und die Eigenschaften der Elemente übertragen.

Es ist zu beachten:

Die Priorität liegt immer auf der nativen HTML5-Semantik. Wenn ein geeignetes HTML-Element vorhanden ist, verwenden Sie es anstelle der Simulation seines Verhaltens durch role und andere ARIA-Attribute. Zum Beispiel <button> anstelle von <div role="button">.
Das Ändern der Rolle eines Elements ändert nicht sein eingebautes Verhalten. Zum Beispiel macht role="button" auf einem div es nicht fokussierbar oder aktivierbar mit Space oder Enter ohne zusätzliches JavaScript.