Heeft Geldige Toegankelijkheidsacties

Regel-ID: heeft-geldige-toegankelijkheidsacties

WCAG 2.0 (A) 4.1.2

Toegankelijkheidsacties stellen ondersteunende technologieën in staat om de acties van een component programmatisch aan te roepen. Om toegankelijkheidsacties te ondersteunen, moet een component twee dingen doen:

• Definieer de lijst met acties die het ondersteunt via de accessibilityActions eigenschap.
• Implementeer een onAccessibilityAction functie om actieaanvragen te verwerken.

De accessibilityActions eigenschap moet een lijst met actieobjecten bevatten. Elk actieobject moet de volgende velden bevatten:

Standaardacties

Het name veld moet een van de volgende zijn voor standaardacties:

Het label veld is optioneel voor standaardacties en wordt vaak niet gebruikt door ondersteunende technologieën.

Aangepaste Acties

De name en label velden zijn vereist voor aangepaste acties.

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

onAccessibilityAction

Het enige argument voor deze functie is een gebeurtenis die de naam van de uit te voeren actie bevat.

<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;
    }
  }}
/>

Waarom Het Ertoe Doet

Het juiste accessibilityActions name veld gebruiken of ervoor zorgen dat aangepaste acties zowel een name als een label bevatten, stelt gebruikers van ondersteunende technologieën in staat specifieke gebaren te gebruiken. Als een gebruiker bepaalde gebaren niet kan gebruiken, kan het zijn dat ze geen cruciale taken binnen een app kunnen voltooien, zoals een aankoop doen of een afspraak plannen.

Hoe het Probleem op te Lossen

Zorg ervoor dat een name is gespecificeerd voor standaard toegankelijkheidsacties en dat een onAccessibilityAction event handler is geïmplementeerd voor de actie. Als u een aangepaste toegankelijkheidsactie gebruikt, moet u ook een labeldefiniëren.

Voorbeelden die Slagen

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

Voorbeelden die Falen

Een aangepaste accessibilityAction is correct gedefinieerd, maar er is geen onAccessibilityAction functie om de gebeurtenis te verwerken.

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

Er is een aangepaste actie gedefinieerd en heeft een bijbehorende onAccessibilityAction functie, maar een label is niet ingesteld.

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

Middelen

• React Native Toegankelijkheidsacties