Verfügt über gültige Zugänglichkeitsaktionen

Regel-ID: has-valid-accessibility-actions

WCAG 2.0 (A) 4.1.2

Zugänglichkeitsaktionen ermöglichen es unterstützenden Technologien, die Aktionen einer Komponente programmgesteuert auszuführen. Um Barrierefreiheitsaktionen zu unterstützen, muss eine Komponente zwei Dinge ausführen:

– Definieren über die accessibilityActions Eigenschaft die Liste der unterstützten Aktionen.

• Implementieren eine onAccessibilityAction Funktion zur Verarbeitung von Aktionsanforderungen.

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

Standardaktionen

Für Standardaktionen muss das Feld name eines der folgenden sein:

Das label Feld ist für Standardaktionen optional und wird von unterstützenden Technologien häufig nicht verwendet.

Benutzerdefinierte Aktionen

Die Felder name und label werden für benutzerdefinierte Aktionen benötigt.

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

onAccessibilityAction

Das einzige Argument dieser 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

Wenn Sie das richtige accessibilityActions name Feld verwenden oder sicherstellen, dass benutzerdefinierte Aktionen sowohl ein name als auch label haben, können Benutzer unterstützender Technologien bestimmte Gesten verwenden. Wenn ein Benutzer bestimmte Gesten nicht verwenden kann, ist er möglicherweise nicht in der Lage, wichtige Aufgaben in einer App auszuführen, z. B. einen Einkauf zu tätigen oder einen Termin zu vereinbaren.

So beheben Sie das Problem

Stellen Sie sicher, dass für Standardaktionen zur Barrierefreiheit ein name angegeben ist und für die Aktion ein onAccessibilityAction Ereignishandler implementiert ist. Wenn Sie eine benutzerdefinierte Eingabehilfeaktion verwenden, müssen Sie auch eine Funktion label definieren.

Bestandene Beispiele

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

Nicht bestandene Beispiele

Eine benutzerdefinierte Funktion accessibilityAction ist ordnungsgemäß definiert, es gibt jedoch keine onAccessibilityAction Funktion zur Verarbeitung des Ereignisses.

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

Eine benutzerdefinierte Aktion ist definiert und verfügt über eine zugehörige Funktion onAccessibilityAction , aber eine label ist nicht festgelegt.

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

Ressourcen

• React Native-Zugänglichkeitsaktionen