Hat eine gültige Zugänglichkeitsrolle

Regel-ID: hat-gueltige-zugaenglichkeitsrolle

WCAG 2.0 (A) 4.1.2

accessibilityRole kommuniziert den Zweck einer Komponente an den Benutzer von unterstützender Technologie.

accessibilityRole kann eine der folgenden sein:

• anpassbar Wird verwendet, wenn ein Element "angepasst" werden kann (z. B. ein Schieberegler).
• alarm Wird verwendet, wenn ein Element wichtigen Text enthält, der dem Benutzer präsentiert werden soll.
• button Wird verwendet, wenn das Element als Schaltfläche behandelt werden soll.
• checkbox Wird verwendet, wenn ein Element ein Kontrollkästchen darstellt, das aktiviert, deaktiviert oder gemischt aktiviert sein kann.
• kombinationsfeld Wird verwendet, wenn ein Element ein Kombinationsfeld darstellt, das es dem Benutzer ermöglicht, zwischen mehreren Optionen zu wählen.
• kopfzeile Wird verwendet, wenn ein Element als Kopfzeile für einen Inhaltsbereich fungiert (z. B. der Titel einer Navigationsleiste).
• bild Wird verwendet, wenn das Element als Bild behandelt werden soll. Kann mit einer Schaltfläche oder einem Link kombiniert werden.
• bildschaltfläche Wird verwendet, wenn das Element als Schaltfläche behandelt werden soll und gleichzeitig ein Bild ist.
• tastaturtaste Wird verwendet, wenn das Element als Tastaturtaste fungiert.
• link Wird verwendet, wenn das Element als Link behandelt werden soll.
• menü Wird verwendet, wenn die Komponente ein Menü von Auswahlmöglichkeiten ist.
• menüleiste Wird verwendet, wenn eine Komponente ein Container für mehrere Menüs ist.
• menüeintrag Wird verwendet, um ein Element innerhalb eines Menüs darzustellen.
• keine Wird verwendet, wenn das Element keine Rolle hat.
• fortschrittsbalken Wird verwendet, um eine Komponente darzustellen, die den Fortschritt einer Aufgabe anzeigt.
• radio Wird verwendet, um eine Optionsschaltfläche darzustellen.
• radiogruppe Wird verwendet, um eine Gruppe von Optionsschaltflächen darzustellen.
• scrollleiste Wird verwendet, um eine Scrollleiste darzustellen.
• suche Wird verwendet, wenn ein Textelement auch als Suchfeld behandelt werden soll.
• drehscheibe Wird verwendet, um eine Schaltfläche darzustellen, die eine Liste von Auswahlmöglichkeiten öffnet.
• zusammenfassung Wird verwendet, wenn ein Element eine kurze Übersicht über die aktuellen Bedingungen in der App geben kann, wenn die App gestartet wird.
• schalter Wird verwendet, um einen Schalter darzustellen, der ein- und ausgeschaltet werden kann.
• Registerkarte Wird zur Darstellung einer Registerkarte verwendet.
• Registerkartenliste Wird zur Darstellung einer Liste von Registerkarten verwendet.
• Text Wird verwendet, wenn das Element als statischer Text behandelt werden sollte, der sich nicht ändern kann.
• Timer Wird zur Darstellung eines Timers verwendet.
• Umschaltfläche Wird zur Darstellung einer Umschaltfläche verwendet. Sollte mit accessibilityState checked verwendet werden, um anzuzeigen, ob die Schaltfläche ein- oder ausgeschaltet ist.
• Werkzeugleiste Wird zur Darstellung einer Werkzeugleiste (eines Containers für Aktionstasten oder Komponenten) verwendet.
• Raster Wird mit ScrollView, VirtualizedList, FlatList oder SectionList verwendet, um ein Raster darzustellen. Fügt die Ein-/Aus-Blenden von Rastern für Androids GridView hinzu.

Warum es wichtig ist

Elemente, die ungültige Rollenwerte zugewiesen bekommen, werden von unterstützenden Technologien nicht so interpretiert, wie vom Entwickler vorgesehen.

Wenn Screenreader und andere unterstützende Technologien die Rolle jedes Elements nicht kennen, können sie nicht intelligent mit ihm interagieren, noch können sie die Rolle dem Benutzer mitteilen. Die Funktionen, Eigenschaften und Methoden eines Elements, um Informationen zum und/oder vom Benutzer zu übermitteln, können nicht über unterstützende Technologien kommuniziert werden, wenn ein Rollenwert ungültig ist.

Wie man das Problem behebt

Stellen Sie sicher, dass der accessibilityRole-Wert eine gültige Rolle ist.

Gültige Beispiele

<TouchableOpacity accessibilityRole="button">
  <Text>Increase Count</Text>
</TouchableOpacity>

Ungültige Beispiele

<TouchableOpacity accessibilityRole="secondary-button">
  <Text>Increase Count</Text>
</TouchableOpacity>

Ressourcen

• React Native accessibilityRole