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:

• adjustable Gebruikt wanneer een element "aangepast" kan worden (bijv. een schuifbalk).
• alert Gebruikt wanneer een element belangrijke tekst bevat die aan de gebruiker gepresenteerd moet worden.
• button Gebruikt wanneer het element behandeld moet worden als een knop.
• checkbox Gebruikt wanneer een element een selectievakje vertegenwoordigt dat aangevinkt, niet aangevinkt of in een gemengde toestand aangevinkt kan worden.
• combobox Gebruikt wanneer een element een keuzelijst vertegenwoordigt, waarmee de gebruiker uit meerdere keuzes kan selecteren.
• header Gebruikt wanneer een element fungeert als een header voor een contentgedeelte (bijv. de titel van een navigatiebalk).
• image Gebruikt wanneer het element als een afbeelding behandeld moet worden. Kan worden gecombineerd met een knop of link.
• imagebutton Gebruikt wanneer het element als een knop behandeld moet worden en tevens een afbeelding is.
• keyboardkey 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.
• menubar Gebruikt wanneer een component een container is van meerdere menu's.
• menuitem Gebruikt om een item binnen een menu te vertegenwoordigen.
• none Gebruikt wanneer het element geen rol heeft.
• progressbar Gebruikt om een component te vertegenwoordigen dat de voortgang van een taak aangeeft.
• radio Gebruikt om een keuzerondje te vertegenwoordigen.
• radiogroup Gebruikt om een groep van keuzerondjes te vertegenwoordigen.
• scrollbar Gebruikt om een schuifbalk te vertegenwoordigen.
• search Gebruikt wanneer een invoerveldelement ook als zoekveld behandeld moet worden.
• spinbutton Gebruikt om een knop te vertegenwoordigen die een lijst van keuzes opent.
• summary 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.
• switch Gebruikt om een schakelaar te vertegenwoordigen die aan en uit geschakeld kan worden.
• tab Gebruikt om een tabblad te vertegenwoordigen.
• tablist Gebruikt om een lijst van tabbladen te vertegenwoordigen.
• text Gebruikt wanneer het element behandeld moet worden als statische tekst die niet kan veranderen.
• timer Gebruikt om een timer te vertegenwoordigen.
• togglebutton Gebruikt om een schakelschakelaar te vertegenwoordigen. Moet worden gebruikt met accessibilityState om aan te geven of de knop ingeschakeld of uitgeschakeld is.
• toolbar Gebruikt om een werkbalk te vertegenwoordigen (een container van actiekoppen of componenten).
• grid 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