Label in Naam

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

Element	Falend ❌	Geslaagd ✅
Knop met tekst	naam = "Inloggen"	naam = "Aanmelden"
Overeenkomst	Naam komt niet overeen met zichtbare label	Naam komt overeen met zichtbare label
VoiceOver	„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 éé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.

Verwijs naar de tabel . Als een knop zichtbare tekst heeft die zegt „Aanmelden“, moet VoiceOver ook „Aanmelden“ aankondigen - niet iets anders, zoals „Inloggen“.

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. probleem LabelInName Zorg ervoor dat het inspectiepaneel zichtbaar is
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

eigenschap zou moeten overeenkomen met of de zichtbare tekst bevatten. accessibilityLabel Standaard gebruikt een knop de titel als zijn

, en zal daarom deze regel naleven. accessibilityLabelVoor interactieve elementen zonder titel, gebruik een aanraakbare weergave die de besturingselementen en tekstcomponenten bevat. Op deze manier wordt het textelement het zichtbare label voor het besturingselement. Stel het element dat alles bevat

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

in zodat het overeenkomt met of de zichtbare tekst bevat. accessibilityLabel Kan ik deze regel negeren?

<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

Ernstige impact 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 regels negeren .Resources

Deque University Cursuspagina'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-bronnen vereist een abonnement.

Andere bronnen

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

• Succescriterium 2.5.3 - Label in Naam
  • WCAG 2.1 Begrijpdocumenten
• Begrijpen 2.5.3 A - Label in Naam
  • Understanding 2.5.3 A - Label in Name