Label In Naam

Leer 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.

Voorbeeld van mislukking ❌

De knop name is „Inloggen“

TalkBack kondigt aan „Inloggen, knop“ - komt niet overeen met het zichtbare label „Aanmelden“

Voice Access - Gebruiker zegt „Aanmelden“
Dit activeert de knop niet omdat de naam „Inloggen“ is, niet „Aanmelden“

Voorbeeld van slagen ✅

De knop name is „Aanmelden“

TalkBack kondigt aan „Aanmelden, knop“ - komt overeen met het zichtbare label

Voice Access - Gebruiker zegt „Aanmelden“
Dit activeert de knop omdat de naam overeenkomt met het zichtbare label

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.

Als een knop zichtbare tekst heeft die „Aanmelden“ zegt, 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 ofwel exact overeenkomt met of de zichtbare tekst bevat. Als het element een Button of een klikbare TextView is:

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 CheckBox is, zie dan CheckBox Naam.

Samenstellen

Zorg ervoor dat de contentDescription van het element exact overeenkomt met of de 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 de zichtbare tekst van het element bevatten.

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

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

Voor interactieve elementen zonder titel, gebruik een aanraakbare weergave die het element en tekstcomponenten bevat. Op deze manier wordt de verstrekte tekst het zichtbare label voor het element. Stel de accessibilityLabel van het omvattende element zo in dat het ofwel overeenkomt met of de zichtbare tekst bevat.

<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 „Visa Card xxxx-xxxx-xxxx-1234“ zegt, wil je misschien dat de tekst die door TalkBack wordt aangekondigd „Visa Card eindigend op 1-2-3-4“ zegt. 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 zoals dit, zou het logisch zijn om de regel te negeren. Leer 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
  • Begrip van 2.5.3 A - Label in Naam