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 actie-aanvragen te verwerken.

De accessibilityActions eigenschap moet een lijst van 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 hulpmiddelen.

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 correct gebruiken van het accessibilityActions name veld of ervoor zorgen dat aangepaste acties zowel een name als label hebben, stelt gebruikers van hulpmiddelen in staat om specifieke gebaren te gebruiken. Als een gebruiker bepaalde gebaren niet kan gebruiken, kunnen zij mogelijk geen cruciale taken binnen een app 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 er een onAccessibilityAction gebeurtenishandler is geïmplementeerd voor de actie. Als je een aangepaste toegankelijkheidsactie gebruikt, moet je ook een label definië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 het evenement te verwerken.

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

Een aangepaste actie is 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