Label In Naam

Ontdek hoe we kunstmatige intelligentie gebruiken voor deze regel!

Waar We Op Controleren

Als een interactief element een zichtbaar label heeft, moet de naam die door ondersteunende technologie (AT) wordt aangekondigd, hetzelfde zijn.

Element	Fout ❌	Geslaagd ✅
Knop met tekst	naam = „Inloggen“	naam = „Aanmelden“
Komt overeen	Naam komt niet overeen zichtbaar label	Naam komt overeen zichtbaar label
TalkBack	„Inloggen, knop“	„Aanmelden, knop“
Voice Access	Gebruiker zegt hardop „Aanmelden“ Dit zal de knop niet activeren omdat de naam „Inloggen“ is, niet „Aanmelden“	Gebruiker zegt hardop „Aanmelden“ Dit zou de knop moeten activeren omdat de naam „Aanmelden“ is

In een Oogopslag

• Deze regel heeft een grote impact voor gebruikers
• Pas de zichtbare tekst aan: Als gebruikers met zicht een knop "Aanmelden" kunnen zien, zorg er dan voor dat schermlezers ook "Aanmelden" aankondigen
• Het is prima om extra context toe te voegen: "Opslaan" kan "Document opslaan" worden
• Laat nooit zichtbare woorden weg: Schermlezers moeten een "Catalogus doorzoeken" knop aankondigen, niet alleen "Zoeken"

Impact op Gebruikers

Mensen die ondersteunende technologie zoals TalkBack gebruiken en/of slechtziend zijn, worden het meest getroffen door gedetecteerde problemen. Label in Naam problemen kunnen bijdragen aan een verwarrende of tegenstrijdige ervaring tussen de aankondiging van TalkBack en de inhoud op het scherm.

Verwijs naar de tabel hierboven. Als er een knop is met zichtbare tekst "Aanmelden", moet TalkBack ook "Aanmelden" aankondigen - niet iets anders, zoals "Inloggen".

Opmerking: Afhankelijk van de programmeertaal kan de 'naam'-eigenschap van een element anders worden genoemd. Voor XML of Compose wordt het een inhoudsbeschrijving genoemd. Voor React Native heet het een toegankelijkheidslabel.

Bevestig Label in Naam Probleem

1. Schakel TalkBack in
2. Probeer het element te focussen
3. Een van de volgende dingen zal gebeuren:
   • Onbereikbaar: Tekst aangekondigd door TalkBack is anders dan de zichtbare tekst van het element
   • Toegankelijk: Tekst aangekondigd door TalkBack is hetzelfde als of omvat de zichtbare tekst van het element

Los Problemen op

Om Label in Naam problemen op te lossen, stelt u een naam voor het element in die ofwel overeenkomt met of de zichtbare tekst van het element bevat.

Wanneer de zichtbare tekst beschrijvend en uniek is, wordt aanbevolen dat de naam exact overeenkomt met de tekst.

Wanneer de zichtbare tekst op zichzelf niet expliciet aan AT-gebruikers (bijv. schermlezer) de actie van het element vertelt, zou het een goed idee zijn om de toegankelijke naam uit te breiden om meer context te bieden. Bijvoorbeeld:

• Zichtbaar Label: „Postvak IN, 5“, Naam: „Postvak IN, 5 ongelezen berichten“
• Zichtbaar Label: „Verwijderen“, Naam: „Gebruikersprofiel Verwijderen“

XML

Stel een inhoudsbeschrijving in die precies overeenkomt met of het zichtbare tekst bevat. Als het element een Button of een klikbaar TextView:

Button button = .......
button.setText("Search");
button.setContentDescription("Search the store");

TextView textView = .......
textView.setText("Book Title");
textView.setContentDescription("Book title to search for");
// Not an exact match, but the accessibilityLabel includes all the visible text

Als het element een CheckBoxis, zie dan CheckBox Naam.

Samenstellen

Zorg ervoor dat de contentDescription precies overeenkomt met of het zichtbare tekst bevat.

@Composable
fun EmailButton() {
    Button(
        modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
        onClick = { … },
    ) { 
        Text(
            text = “Send”
        )
    }
}

React Native

De accessibilityLabel eigenschap moet ofwel overeenkomen met of het zichtbare tekst van het element bevatten.

Standaard zal een knop zijn titel gebruiken als zijn accessibilityLabel, en daarom zal het voldoen aan deze regel.

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>
// The visible text and accessibility label match exactly

Voor interactieve elementen zonder titel, gebruik een aanraakbare view die het element en tekstcomponenten bevat. Op deze manier wordt de gegeven tekst het zichtbare label voor het element. Stel de binnen het element accessibilityLabel in om overeen te komen met of het zichtbare tekst te bevatten.

<TouchableOpacity
   style={styles.switchRow}
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel='Subscribe to notifications'
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
     setIsEnabled(!isEnabled)
   }}> 
     <Text style={{ fontSize: 22 }}> 
        Subscribe
     </Text>
     <Switch
        trackColor={{ false: 'lightgray', true: 'dimgray' }}
        thumbColor={'white'}
        accessibilityElementsHidden={true}
        importantForAccessibility='no-hide-descendants'
        value={isEnabled}

         onValueChange={() => {
           setIsEnabled(!isEnabled);
         }}
     />
</TouchableOpacity>

Kan ik deze regel negeren?

Label in Naam heeft een Ernstige impact voor gebruikers, en we raden aan stappen te ondernemen om dit probleem te verhelpen, behalve in zeldzame gevallen. Bijvoorbeeld, als je een knop hebt met zichtbare tekst die zegt "Visa Card xxxx-xxxx-xxxx-1234" wil je misschien de tekst die door TalkBack wordt aangekondigd instellen als "Visa Card eindigend op 1-2-3-4". Aangezien de tekst op de knop niet overeenkomt met de naam die door TalkBack wordt aangekondigd, zou dit een mislukking voor Label in Naam veroorzaken. Maar in een geval als dit zou het zinvol zijn om de regel te negeren. Lees meer over regels negeren.

Hulpmiddelen

Deque University Cursus Pagina's

• 2.5.3 Label in Naam (A)
• Succescriterium 2.5.3 - Label in Naam
• Vereisten - 2.5.3.a Label in Naam

Opmerking: Volledige toegang tot Deque University-hulpmiddelen vereist een abonnement.

Andere Hulpmiddelen

• Web Content Accessibility Guidelines (WCAG) 2.1, W3C Aanbeveling
  • Succescriterium 2.5.3 - Label in Naam
• Inzicht in WCAG 2.1 Documenten
  • Inzicht in 2.5.3 A - Label in Naam