Hat gültige Barrierefreiheitsaktionen

Regel-ID: hat-gueltige-barrierefreiheitsaktionen

WCAG 2.0 (A) 4.1.2

Barrierefreiheitsaktionen ermöglichen es unterstützenden Technologien, die Aktionen einer Komponente programmatisch auszuführen. Zur Unterstützung von Barrierefreiheitsaktionen muss eine Komponente zwei Dinge tun:

• Die Liste der unterstützten Aktionen über die accessibilityActions-Eigenschaft definieren.
• Eine onAccessibilityAction-Funktion implementieren, um Aktionsanfragen zu bearbeiten.

Die accessibilityActions-Eigenschaft sollte eine Liste von Aktionsobjekten enthalten. Jedes Aktionsobjekt sollte die folgenden Felder enthalten:

Standardaktionen

Das name-Feld muss bei Standardaktionen eine der folgenden Optionen sein:

Das label-Feld ist bei Standardaktionen optional und wird oft nicht von unterstützenden Technologien verwendet.

Benutzerdefinierte Aktionen

Die Felder name und label sind bei benutzerdefinierten Aktionen erforderlich.

<View
  accessibilityActions={[
    {name: 'cut', label: 'cut'}
  ]}
/>

onAccessibilityAction

Das einzige Argument für diese Funktion ist ein Ereignis, das den Namen der auszuführenden Aktion enthält.

<View
  accessible={true}
  accessibilityActions={[
    {name: 'cut', label: 'cut'},
    {name: 'copy', label: 'copy'},
    {name: 'paste', label: 'paste'},
  ]}
  onAccessibilityAction={(event) => {
    switch (event.nativeEvent.actionName) {
      case 'cut':
        Alert.alert('Alert', 'cut action success');
        break;
      case 'copy':
        Alert.alert('Alert', 'copy action success');
        break;
      case 'paste':
        Alert.alert('Alert', 'paste action success');
        break;
    }
  }}
/>

Warum es wichtig ist

Die richtige Verwendung des accessibilityActions- oder name-Felds oder die Sicherstellung, dass benutzerdefinierte Aktionen sowohl über ein name als auch ein label verfügen, ermöglicht es Nutzern unterstützender Technologien, spezifische Gesten auszuführen. Wenn ein Benutzer bestimmte Gesten nicht ausführen kann, kann er möglicherweise kritische Aufgaben innerhalb einer App, wie zum Beispiel einen Kauf tätigen oder einen Termin vereinbaren, nicht abschließen.

Wie das Problem behoben werden kann

Stellen Sie sicher, dass ein name für Standard-Barrierefreiheitsaktionen angegeben ist und ein onAccessibilityAction-Ereignishandler für die Aktion implementiert wird. Wenn Sie eine benutzerdefinierte Barrierefreiheitsaktion verwenden, müssen Sie auch ein label definieren.

Beispiel für korrekte Implementierungen

<View
  accessibilityActions={[
    {name: 'magicTap'},
  ]}
  onAccessibilityAction={(event) => {
    switch (event.nativeEvent.actionName) {
      case 'magicTap':
        Alert.alert('Alert', 'magicTap action success');
        break;
    }
  }}
/>

Beispiel für fehlerhafte Implementierungen

Ein benutzerdefiniertes accessibilityAction ist korrekt definiert, aber es gibt keine onAccessibilityAction-Funktion, um das Ereignis zu bearbeiten.

<View
  accessibilityActions={[
    {name: 'cut', label: 'cut'},
  ]}
/>

Eine benutzerdefinierte Aktion ist definiert und hat eine zugehörige onAccessibilityAction-Funktion, aber ein label ist nicht gesetzt.

<View
  accessibilityActions={[
    {name: 'cut'},
  ]}
  onAccessibilityAction={(event) => {
    switch (event.nativeEvent.actionName) {
      case 'cut':
        Alert.alert('Alert', 'cut action success');
        break;
    }
  }}
/>

Ressourcen

• React Native Barrierefreiheitsaktionen