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:

• adjustable Wird verwendet, wenn ein Element "angepasst" werden kann (z. B. ein Schieberegler).
• alert 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.
• combobox Wird verwendet, wenn ein Element ein Kombinationsfeld darstellt, das es dem Benutzer ermöglicht, zwischen mehreren Optionen zu wählen.
• header Wird verwendet, wenn ein Element als Kopfzeile für einen Inhaltsbereich fungiert (z. B. der Titel einer Navigationsleiste).
• image Wird verwendet, wenn das Element als Bild behandelt werden soll. Kann mit einer Schaltfläche oder einem Link kombiniert werden.
• imagebutton Wird verwendet, wenn das Element als Schaltfläche behandelt werden soll und gleichzeitig ein Bild ist.
• keyboardkey Wird verwendet, wenn das Element als Tastaturtaste fungiert.
• link Wird verwendet, wenn das Element als Link behandelt werden soll.
• menu Wird verwendet, wenn die Komponente ein Menü von Auswahlmöglichkeiten ist.
• menubar Wird verwendet, wenn eine Komponente ein Container für mehrere Menüs ist.
• menuitem Wird verwendet, um ein Element innerhalb eines Menüs darzustellen.
• none Wird verwendet, wenn das Element keine Rolle hat.
• progressbar Wird verwendet, um eine Komponente darzustellen, die den Fortschritt einer Aufgabe anzeigt.
• radio Wird verwendet, um eine Optionsschaltfläche darzustellen.
• radiogroup Wird verwendet, um eine Gruppe von Optionsschaltflächen darzustellen.
• scrollbar Wird verwendet, um eine Scrollleiste darzustellen.
• search Wird verwendet, wenn ein Textelement auch als Suchfeld behandelt werden soll.
• spinbutton Wird verwendet, um eine Schaltfläche darzustellen, die eine Liste von Auswahlmöglichkeiten öffnet.
• summary Wird verwendet, wenn ein Element eine kurze Übersicht über die aktuellen Bedingungen in der App geben kann, wenn die App gestartet wird.
• switch Wird verwendet, um einen Schalter darzustellen, der ein- und ausgeschaltet werden kann.
• tab Wird zur Darstellung einer Registerkarte verwendet.
• tablist 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.
• togglebutton Wird zur Darstellung einer Umschaltfläche verwendet. Sollte mit accessibilityState checked verwendet werden, um anzuzeigen, ob die Schaltfläche ein- oder ausgeschaltet ist.
• toolbar Wird zur Darstellung einer Werkzeugleiste (eines Containers für Aktionstasten oder Komponenten) verwendet.
• grid 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