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 assistieve technologie.

accessibilityRole kan een van de volgende zijn:

• aanpasbaar Gebruikt wanneer een element "aangepast" kan worden (bijv. een schuifbalk).
• waarschuwing Gebruikt wanneer een element belangrijke tekst bevat die aan de gebruiker gepresenteerd moet worden.
• knop Gebruikt wanneer het element behandeld moet worden als een knop.
• selectievakje Gebruikt wanneer een element een selectievakje vertegenwoordigt dat aangevinkt, niet aangevinkt of in een gemengde toestand aangevinkt kan worden.
• keuzelijst Gebruikt wanneer een element een keuzelijst vertegenwoordigt, waarmee de gebruiker uit meerdere keuzes kan selecteren.
• koptekst Gebruikt wanneer een element fungeert als een header voor een contentgedeelte (bijv. de titel van een navigatiebalk).
• afbeelding Gebruikt wanneer het element als een afbeelding behandeld moet worden. Kan worden gecombineerd met een knop of link.
• afbeeldingsknop Gebruikt wanneer het element als een knop behandeld moet worden en tevens een afbeelding is.
• toets Gebruikt wanneer het element fungeert als een toets op een toetsenbord.
• link Gebruikt wanneer het element behandeld moet worden als een link.
• menu Gebruikt wanneer de component een menu van keuzes is.
• menubalk Gebruikt wanneer een component een container is van meerdere menu's.
• menu-item Gebruikt om een item binnen een menu te vertegenwoordigen.
• geen Gebruikt wanneer het element geen rol heeft.
• voortgangsbalk Gebruikt om een component te vertegenwoordigen dat de voortgang van een taak aangeeft.
• radio Gebruikt om een keuzerondje te vertegenwoordigen.
• radiogroep Gebruikt om een groep van keuzerondjes te vertegenwoordigen.
• scrollbalk Gebruikt om een schuifbalk te vertegenwoordigen.
• zoek Gebruikt wanneer een invoerveldelement ook als zoekveld behandeld moet worden.
• draai/knop Gebruikt om een knop te vertegenwoordigen die een lijst van keuzes opent.
• samenvatting Gebruikt wanneer een element kan worden gebruikt om een snelle samenvatting van de huidige condities in de app te geven wanneer de - app voor het eerst start.
• schakelaar Gebruikt om een schakelaar te vertegenwoordigen die aan en uit geschakeld kan worden.
• tabblad Gebruikt om een tabblad te vertegenwoordigen.
• **tablijst** Gebruikt om een lijst van tabbladen te vertegenwoordigen.
• **tekst** Gebruikt wanneer het element behandeld moet worden als statische tekst die niet kan veranderen.
• **timer** Gebruikt om een timer te vertegenwoordigen.
• **schakelknop** Gebruikt om een schakelschakelaar te vertegenwoordigen. Moet worden gebruikt met accessibilityState om aan te geven of de knop ingeschakeld of uitgeschakeld is.
• **werkbalk** Gebruikt om een werkbalk te vertegenwoordigen (een container van actiekoppen of componenten).
• **raster** Gebruikt met ScrollView, VirtualizedList, FlatList of SectionList om een raster te vertegenwoordigen. Voegt de in/uit van rasteraankondigingen 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