`[role]`-Elemente verfügen über alle erforderlichen `[aria-*]`-Attribute
Die Rollen (roles) in HTML haben eine besondere Bedeutung für die Barrierefreiheit von Websites. Sie helfen Browsern, Screenreadern und anderen Tools, die Funktion von Elementen auf der Seite zu bestimmen und wie sie verarbeitet werden sollen.
Um jedoch von den Rollen vollständig profitieren zu können, müssen sie die erforderlichen aria-* Attribute haben. Diese Attribute geben zusätzliche Informationen über die Rolle des Elements und seine Beziehung zu anderen Elementen auf der Seite an.
Ein Beispiel ist das aria-labelledby Attribut, das auf das Element verweist, das als Beschriftung für die Rolle dient. Dies ist besonders wichtig für Screenreader, die diese Informationen verwenden, um das Element dem Benutzer zu beschreiben. Ohne dieses Attribut könnte der Screenreader nicht verstehen, welche Rolle das Element auf der Seite hat.
Ein weiteres Beispiel ist das aria-controls Attribut, das auf Elemente verweist, die von der Rolle gesteuert werden. Wenn beispielsweise ein Element die Rolle "Ausblenden/Einblenden-Schaltfläche" hat, kann das aria-controls Attribut auf einen Block verweisen, der beim Klicken auf die Schaltfläche ausgeblendet/eingeblendet wird. Dies ermöglicht es dem Screenreader zu verstehen, was beim Klicken auf die Schaltfläche passiert und welche Elemente damit verknüpft sind.
Insgesamt ist die Verwendung von aria-* Attributen eine notwendige Voraussetzung für den vollen Nutzen von Rollen in HTML. Sie geben zusätzliche Informationen über die Rolle des Elements und seine Beziehung zu anderen Elementen auf der Seite an, was Screenreadern hilft, die Seite besser dem Benutzer zu beschreiben. Dies hilft auch dabei, die allgemeine Barrierefreiheit der Website für Menschen mit eingeschränkten Fähigkeiten zu verbessern.
Ähnliche Artikel:
`button`-, `link`- und `menuitem`-Elemente haben zugängliche Namen `[role]`-Elemente verfügen über alle erforderlichen `[aria-*]`-Attribute `[role]`-Werte sind gültig Überschriftenelemente werden in einer fortlaufenden absteigenden Reihenfolge angezeigt `[accesskey]`-Werte sind eindeutig `<dl>`-Elemente enthalten ausschließlich Gruppen aus `<dt>`- und `<dd>`-Elementen sowie `<script>`-, `<template>`- oder `<div>`-Elemente, die richtig angeordnet sind. Die Elemente mit einer ARIA-`[role]`, deren untergeordnete Elemente eine bestimmte `[role]` enthalten müssen, haben alle erforderlichen untergeordneten Elemente. Listenelemente (`<li>`) befinden sich in übergeordneten `<ul>`- oder `<ol>`-Elementen ARIA-Ein-/Aus-Schaltflächen haben zugängliche Namen Interactive controls are keyboard focusable