Interaktive Elemente wie Links und Schaltflächen sollten ihren Status anzeigen und sich von nicht interaktiven Elementen unterscheiden lassen. Verwenden Sie sowohl einen visuellen Test als auch einen Screenreader-Test, um zu prüfen, ob interaktive Elemente ihren Zweck und Zustand angeben.
Den visuellen Fokus manuell testen
Wenn Sie den visuellen Fokus manuell testen möchten, TAB über Ihre Seite.
- Können Sie mit der Tabulatortaste zu jedem interaktiven Element wechseln?
- Wenn Sie zu einem interaktiven Element gelangen, gibt es einen visuellen Hinweis darauf, dass Nutzende damit interagieren können?
- Ändert sich die Darstellung der einzelnen interaktiven Elemente, wenn Sie es auswählen?
Es gibt viele Möglichkeiten, die Fokusanzeigen für jedes interaktive Element zu gestalten.
Eine sichere Methode ist die Verwendung von :focus.
Mit der Pseudoklasse :focus können Sie einen einheitlichen Stil auf ein Element anwenden.
Dieser Stil wird jedes Mal angewendet, wenn das Element fokussiert ist, unabhängig von dem Eingabegerät oder der Methode, mit der es fokussiert wurde.
Weitere Informationen finden Sie unter Stilfokus.
Manuelles Testen mit einem Screenreader
Navigieren Sie mit einem Screenreader auf der Seite und prüfen Sie, ob der Screenreader den Namen der einzelnen interaktiven Steuerelemente, die Rolle dieses Steuerelements und den aktuellen interaktiven Status vorlesen kann. Wenn die Rolle eines Elements unklar und der Zustand des Elements unklar ist, müssen Sie möglicherweise die entsprechenden ARIA-Rollen hinzufügen. Weitere Informationen finden Sie unter Benutzerdefinierte Steuerelemente mit ARIA-Rollen.
Außerdem ist es wichtig, genau darauf zu achten, wie interaktive Elemente beschriftet sind. Nutzer von Screenreadern und anderen Hilfstechnologien benötigen Labels, um den Kontext eines Elements zu verstehen. Vage Labels sind üblich und hilfreich beim Navigieren von Inhalten. Weitere Informationen zum Verbessern von Labels und Textalternativen
Warum das wichtig ist
Visuelle Hinweise darauf, was ein Steuerelement bewirkt, erleichtert Nutzern die Bedienung und Navigation auf Ihrer Website. Diese Hinweise werden als Angebote bezeichnet. Durch die Bereitstellung von Angeboten können Nutzer Ihre Website auf einer Vielzahl von Geräten nutzen.
Ressourcen
Prüfung des Quellcodes für interaktive Elemente geben ihren Zweck und ihren Status an