Label in Naam

Lees hoe we kunstmatige intelligentie gebruiken voor deze regel!

Wat We Controleren

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

Mislukt Voorbeeld ❌

De knop name is "Log in"

VoiceOver meldt "Log in, knop" - wat niet overeenkomt met het zichtbare label "Aanmelden"

Voice Control - Gebruiker zegt "Aanmelden"
Dit zal de knop niet activeren omdat de naam "Log in" is, niet "Aanmelden"

Gelukt Voorbeeld ✅

De knop name is "Aanmelden"

VoiceOver meldt "Aanmelden, knop" - wat overeenkomt met het zichtbare label

Voice Control - Gebruiker zegt "Aanmelden"
Dit activeert de knop omdat de naam overeenkomt met het zichtbare label

In één oogopslag

• Deze regel heeft een ernstige impact voor gebruikers
• Kom overeen met de zichtbare tekst: Als ziende gebruikers een "Aanmelden"-knop kunnen zien, zorg er dan voor dat schermlezers ook "Aanmelden" aankondigen
• Het is oké 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 assistieve technologie zoals VoiceOver gebruiken en/of een visuele beperking hebben, worden het meest beïnvloed door gedetecteerde problemen. Label in Naam-problemen kunnen bijdragen aan een verwarrende of tegenstrijdige ervaring tussen de aankondiging van VoiceOver en de inhoud op het scherm.

Als een knop zichtbaar de tekst "Aanmelden" heeft, zou VoiceOver ook "Aanmelden" moeten melden — niet iets anders, zoals "Log in".

Opmerking: Afhankelijk van de programmeertaal kan de 'naam'-eigenschap voor een element iets anders worden genoemd. In Swift en React Native wordt het bijvoorbeeld een toegankelijkheidslabel genoemd.

Bevestig Label in Naam Probleem

1. Zet VoiceOver aan
2. Probeer op het element te focussen
3. Een van de volgende dingen zal gebeuren:

• Ontoegankelijk: Tekst aangekondigd door VoiceOver verschilt van de zichtbare tekst van het element
  • Toegankelijk: Tekst aangekondigd door VoiceOver is hetzelfde als of bevat de zichtbare tekst van het element
• Toegankelijk: VoiceOver zal de zichtbare tekst van het element aankondigen.

Problemen Oplossen

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

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

Als de zichtbare tekst op zichzelf assistieve technologiegebruikers (bijv. schermlezer) niet expliciet vertelt wat de actie van het element is, dan is het een goed idee om de toegankelijke naam uit te breiden met meer context. Bijvoorbeeld:

• Zichtbare Label: “Inbox, 5”, Naam: “Inbox, 5 ongelezen berichten”
• Zichtbare Label: “Verwijderen”, Naam: “Gebruikersprofiel verwijderen”

In storyboard:

Selecteer het element met een

1. Selecteer het element met een LabelInName probleem
2. Selecteer de Identity Inspector
3. Onder Toegankelijkheid is er een categorie genaamd "Label". Voer een label in dat exact overeenkomt met of alle zichtbare tekst bevat.
4. In code:

Vind waar het toegankelijkheidslabel is ingesteld en zorg ervoor dat de waarde van het toegankelijkheidslabel overeenkomt met of alle zichtbare tekst van het element bevat.

SwiftUI

button.title = "Search"
button.accessibilityLabel = "Search the store"
// Not an exact match, but the accessibilityLabel includes all the visible text

Stel een toegankelijkheidslabel in dat overeenkomt met of de zichtbare tekst bevat.

React Native

Button(action: {
    openMenu()
}) {
    Text("Sign in")
}.accessibility(label: Text("Sign in"))
// The visible text and accessibility label match exactly

De

De accessibilityLabel eigenschap moet ofwel overeenkomen met ofwel de zichtbare tekst bevatten.

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

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>

Voor interactieve elementen zonder een titel, gebruik een aanraakbare weergave die de controle- en tekstcomponenten bevat. Op deze manier wordt het tekstelement het zichtbare label voor de controle. Stel de accessibilityLabel van het omvattende element in zodat het ofwel overeenkomt met ofwel 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' }}
        ios_backgroundColor={'lightgray'}
        thumbColor={'white'}
        accessibilityElementsHidden={true}
        importantForAccessibility='no-hide-descendants'
        value={isEnabled}

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

Label in Naam heeft een

Label in Naam heeft een voor gebruikers, en we raden aan maatregelen te nemen om dit probleem op te lossen, behalve in zeldzame gevallen. Bijvoorbeeld, als u een knop heeft met zichtbare tekst die "Visa Card xxxx-xxxx-xxxx-1234" aangeeft, wilt u misschien dat de tekst die door VoiceOver wordt aangekondigd zegt "Visa Card eindigend op 1-2-3-4". Omdat de tekst op de knop niet overeenkomt met de naam die door VoiceOver wordt aangekondigd, zou dit een fout veroorzaken voor Label in Naam. Maar in een dergelijk geval zou het zinvol zijn om de regel te negeren. Leer meer over voor gebruikers, en we raden aan om stappen te ondernemen om dit probleem te verhelpen, behalve in zeldzame gevallen. Als je bijvoorbeeld een knop hebt met zichtbare tekst "Visakaart xxxx-xxxx-xxxx-1234" wil je misschien dat de tekst die door VoiceOver wordt aangekondigd "Visakaart eindigend op 1-2-3-4" zegt. Aangezien de tekst op de knop niet overeenkomt met de naam die door VoiceOver wordt aangekondigd, zou dit een probleem veroorzaken voor Label in Naam. Maar in een geval als dit zou het zinvol zijn om de regel te negeren. Lees meer over ..

Deque University Cursuspagina's

2.5.3 Label in Naam (A)

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

Andere bronnen

Richtlijnen voor Toegankelijkheid van Webinhoud (WCAG) 2.1, W3C Aanbeveling

• Succescriterium 2.5.3 - Label in Naam
  • Succescriterium 2.5.3 - Label in Naam
• Begrijpen 2.5.3 A - Label in Naam
  • Uitleg 2.5.3 A - Label in Naam