Interaktive Elemente wie Links und Schaltflächen sollten ihren Status anzeigen und sich von nicht interaktiven Elementen unterscheiden lassen. Um zu prüfen, ob interaktive Elemente ihren Zweck und ihren Status angeben, sollten Sie sowohl einen visuellen als auch einen Screenreader-Test durchführen.
Manuelles Testen
Sie sollten interaktive Elemente visuell und mit Screenreadern testen.
Visuellen Fokus testen
Wenn Sie den visuellen Fokus manuell testen möchten, TAB durch Ihre Seite.
- Können Sie mit der TAB zu jedem interaktiven Element wechseln?
- Gibt es bei einem interaktiven Element einen visuellen Hinweis darauf, dass Nutzer damit interagieren können?
- Ändert sich das Aussehen jedes interaktiven Elements, wenn Sie es auswählen?
Es gibt viele Möglichkeiten, die Fokusindikatoren für jedes interaktive Element zu gestalten.
Eine Möglichkeit besteht darin, der Pseudoklasse :focus einen Stil zuzuweisen.
Dieser Stil wird immer angewendet, wenn das Element den Fokus hat, unabhängig vom Eingabegerät oder der Methode, mit der der Fokus darauf gesetzt wurde.
Weitere Informationen zum Stilfokus
Mit Screenreadern testen
Verwenden Sie einen Screenreader, um sich auf der Seite zu bewegen, und prüfen Sie, ob der Screenreader den Namen jedes interaktiven Steuerelements, die Rolle dieses Steuerelements und den aktuellen interaktiven Status ansagt. Wenn die Rolle und der Zustand eines Elements unklar sind, müssen Sie möglicherweise die entsprechenden ARIA-Rollen hinzufügen.
Weitere Informationen finden Sie unter Benutzerdefinierte Steuerelemente haben ARIA-Rollen.
Achten Sie auch darauf, wie interaktive Elemente beschriftet sind. Nutzer von Screenreadern und anderen Hilfstechnologien benötigen Labels, um den Kontext dieses Elements zu verstehen. Vage Labels kommen häufig vor und sind beim Navigieren in Inhalten nicht hilfreich. Weitere Informationen zum Verbessern von Labels und Alternativtext
Warum das wichtig ist
Wenn Sie visuelle Hinweise zur Funktionsweise eines Steuerelements bereitstellen, können Nutzer Ihre Website leichter bedienen und navigieren. Diese Hinweise werden als Affordances bezeichnet. Dank der Angebotselemente können Nutzer Ihre Website auf einer Vielzahl von Geräten verwenden.
Ressourcen
Quellcode für interaktive Elemente, die ihren Zweck und Status angeben