Heeft Geldige Toegankelijkheidsrol

Regel-ID: heeft-geldige-toegankelijkheidsrol

WCAG 2.0 (A) 4.1.2

accessibilityRole communiceert het doel van een component aan de gebruiker van ondersteunende technologie.

accessibilityRole kan een van de volgende zijn:

• aanpasbaar Wordt gebruikt wanneer een element "aangepast" kan worden (bijv. een schuifregelaar).
• waarschuwing Wordt gebruikt wanneer een element belangrijke tekst bevat die aan de gebruiker moet worden gepresenteerd.
• knop Wordt gebruikt wanneer het element als een knop moet worden behandeld.
• selectievakje Wordt gebruikt wanneer een element een selectievakje voorstelt dat aangevinkt, niet aangevinkt, of gemengd aangevinkt kan zijn.
• keuzelijst Wordt gebruikt wanneer een element een keuzelijst voorstelt, waarmee de gebruiker een keuze kan maken uit meerdere opties.
• koptekst Wordt gebruikt wanneer een element fungeert als een koptekst voor een inhoudssectie (bijv. de titel van een navigatiebalk).
• afbeelding Wordt gebruikt wanneer het element als een afbeelding moet worden behandeld. Kan worden gecombineerd met een knop of link.
• afbeeldingsknop Wordt gebruikt wanneer het element als een knop moet worden behandeld en ook een afbeelding is.
• toets Wordt gebruikt wanneer het element fungeert als een toets op een toetsenbord.
• link Wordt gebruikt wanneer het element als een link moet worden behandeld.
• menu Wordt gebruikt wanneer de component een menu met keuzes is.
• menubalk Wordt gebruikt wanneer een component een container is met meerdere menu's.
• menu-item Wordt gebruikt om een item binnen een menu te vertegenwoordigen.
• geen Wordt gebruikt wanneer het element geen rol heeft.
• voortgangsbalk Wordt gebruikt om een component te vertegenwoordigen die de voortgang van een taak aangeeft.
• radio Wordt gebruikt om een radioknop te vertegenwoordigen.
• radiogroep Wordt gebruikt om een groep radioknoppen te representeren.
• scrollbalk Wordt gebruikt om een scrollbalk te vertegenwoordigen.
• zoek Wordt gebruikt wanneer een tekstveld-element ook als zoekveld moet worden behandeld.
• draai/knop Wordt gebruikt om een knop te vertegenwoordigen die een lijst met keuzes opent.
• samenvatting Wordt gebruikt wanneer een element kan worden gebruikt om een snelle samenvatting van de huidige omstandigheden in de app te geven wanneer de app voor het eerst start.
• schakelaar Wordt gebruikt om een schakelaar te representeren die aan en uit kan worden gezet.
• tabblad Wordt gebruikt om een tabblad weer te geven.
• **tablijst** Wordt gebruikt om een lijst van tabbladen weer te geven.
• **tekst** Wordt gebruikt wanneer het element moet worden behandeld als statische tekst die niet kan veranderen.
• **timer** Wordt gebruikt om een timer weer te geven.
• **schakelknop** Wordt gebruikt om een schakelknop weer te geven. Moet worden gebruikt met accessibilityState gecontroleerd om aan te geven of de knop aan of uit is geschakeld.
• **werkbalk** Wordt gebruikt om een werkbalk weer te geven (een container van actieknoppen of componenten).
• **raster** Wordt gebruikt met ScrollView, VirtualizedList, FlatList of SectionList om een raster weer te geven. Voegt de in/uit raster aankondigingen toe aan Android's GridView.

Waarom Het Belangrijk Is

Elementen met ongeldige rolwaarden worden door ondersteunende technologieën niet geïnterpreteerd zoals bedoeld door de ontwikkelaar.

Wanneer schermlezers en andere ondersteunende technologieën de rol van elk element niet kennen, kunnen ze er niet intelligent mee omgaan, noch kunnen ze de rol aan de gebruiker communiceren. De functies, eigenschappen en manieren van informatieoverdracht naar en/of van de gebruiker van een element kunnen niet worden gecommuniceerd via ondersteunende technologieën wanneer een rolwaarde ongeldig is.

Hoe Het Probleem Oplossen

Zorg ervoor dat de accessibilityRole waarde een geldige rol is.

Voorbeelden Die Slagen

<TouchableOpacity accessibilityRole="button">
  <Text>Increase Count</Text>
</TouchableOpacity>

Voorbeelden Die Falen

<TouchableOpacity accessibilityRole="secondary-button">
  <Text>Increase Count</Text>
</TouchableOpacity>

Bronnen

• React Native accessibilityRole