Rollen definieren, was ein Element ist

Eine Rolle teilt assistiven Technologien mit, um welche Art von Element es sich handelt: eine Schaltfläche, ein Tab, eine Warnung oder ein Dialog. Sie beantwortet die Frage: Was ist das?

Die meisten HTML-Tags besitzen eine integrierte implizite Rolle. Ein nav ist eine Navigation, ein h1 eine Überschrift und ein button eine Schaltfläche.

Wenn kein natives Tag passt, setzen Sie das role-Attribut manuell, um einem generischen Element eine erkannte Identität zu geben.

Widget-Rollen beschreiben interaktive Elemente, die Sie manchmal selbst erstellen: tab, slider, switch, menuitem und treeitem.

Landmark-Rollen teilen die Seite in Bereiche wie banner, main und navigation auf, sodass Nutzer direkt zu einem Abschnitt springen können.

Strukturelle Rollen beschreiben statische Inhalte: heading, list, listitem und figure. Sie kennzeichnen die Struktur Ihrer Informationen.

Ein Element erhält eine Rolle. Sie können etwas nicht gleichzeitig zu einer Schaltfläche und einem Link machen. Wählen Sie daher die Identität, die seiner tatsächlichen Aufgabe entspricht.

Die Wahl einer Rolle ist ein Vertrag. role=tab bedeutet, dass Sie ein übergeordnetes tablist-Element, Tastaturunterstützung und ein verknüpftes tabpanel bereitstellen müssen.

Setzen Sie niemals eine Rolle auf ein Element, das bereits die richtige Rolle besitzt. Eine redundante Rolle auf einer echten Schaltfläche sorgt nur für unnötige Informationen und zusätzliche Risiken.

role=presentation entfernt die Semantik eines Elements. Für eine Layout-Tabelle kann das sinnvoll sein, bei allem, was Nutzer verstehen müssen, ist es gefährlich.

Stellen Sie zuerst die richtige Rolle fest. Zustände und Eigenschaften ergeben erst Sinn, wenn das Element eine klare Identität besitzt, an die sie angehängt werden können.

Sie haben gelernt, dass eine Rolle angibt, was ein Element ist. Bevorzugen Sie native implizite Rollen, fügen Sie nur bei Bedarf eine explizite Rolle hinzu und halten Sie ihren Vertrag ein.