Label vooraan

Ontdek hoe we kunstmatige intelligentie gebruiken voor deze regel!

Waar We Op Letten

Als een interactief element een zichtbaar label heeft, zou dit aan het begin van de naam moeten komen die door ondersteunende technologie (AT) wordt aangekondigd, vóór enige extra informatie.

Element	Niet geslaagd ❌	Geslaagd ✅
Knop met tekst	naam = „Account aanmelden“	naam = „Aanmelden bij account“
Overeenkomst	Naam begint niet met de tekst in het zichtbare label	Naam begint met de tekst in het zichtbare label
VoiceOver	„Account aanmelden, knop“	„Aanmelden bij account, knop“
Stemcontrole	Gebruiker zegt hardop „Aanmelden“ Dit activeert de knop mogelijk niet omdat de naam „Account aanmelden“ is, niet „Aanmelden“	Gebruiker zegt hardop „Aanmelden“ Dit zou de knop moeten activeren omdat de naam „Aanmelden bij account“ is

In Één Oogopslag

• Deze regel heeft een kleine impact voor gebruikers en handhaaft een WCAG Best Practice
• Zichtbare tekst eerst: Begin altijd de naam van een element met precies wat ziende gebruikers op het scherm waarnemen
• Context als tweede: Voeg nuttige informatie toe aan de naam van het element na de zichtbare tekst

Impact voor Gebruikers

Mensen die gebruikmaken van ondersteunende technologie moeten snel kunnen begrijpen wat een element doet en er gemakkelijk mee kunnen communiceren. Wanneer extra woorden vóór de toegankelijke naam komen, vertraagt dit de navigatie en maakt het uw app minder efficiënt voor AT-gebruikers.

• VoiceOver - Sommige gebruikers schakelen tussen modaliteiten — gebruikmakend van zowel een schermlezer als spraakopdrachten. Consistentie in het plaatsen van zichtbare tekst aan het begin van de naam vermindert verwarring bij het vergelijken wat een ziende gebruiker kan waarnemen versus wat door VoiceOver wordt aangekondigd.
• Stemcontrole - Spraakherkenningsmotoren vertrouwen vaak op het begin van een toegankelijke naam om vast te stellen welk element de gebruiker bedoelt. Door het zichtbare label aan het begin van de toegankelijke naam te zetten, wordt de overeenkomst eenduidig, en wordt de kans verkleind dat een gebruiker een element niet kan activeren. Een best practice die wij aanbevelen is om alleen de zichtbare tekst van een element binnen de naam te hebben en secundaire informatie in de toegankelijke waarde, hint of rol te plaatsen.

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

Bevestig Label vooraan Probleem

1. Zet VoiceOver aan
2. Richt de focus op het element
3. Een van de volgende dingen zal gebeuren:
   • Niet toegankelijk: De tekst die eerst door VoiceOver wordt aangekondigd, is anders dan de zichtbare tekst van het element
   • Toegankelijk: VoiceOver zal de zichtbare tekst van het element eerst aankondigen

Los Problemen Op

Om problemen met Label vooraan op te lossen, zorg ervoor dat de tekstinhoud en de toegankelijke naam precies overeenkomen waar mogelijk. Vermijd het gebruik van overbodige woorden zoals „Klik hier om...“ of „Tik om...“, en benoem het element op een manier die de gebruiker expliciet vertelt wat de actie is.

Soms is het nodig om de toegankelijke naam van een element uit te breiden voor meer context. Bijvoorbeeld:

• Zichtbaar label: „Inbox, 5“, Naam: „Inbox, 5 ongelezen berichten“
• Zichtbaar label: „Verwijderen“, Naam: „Gebruikersprofiel verwijderen“

Om problemen met Label vooraan in dergelijke gevallen te vermijden, zorg ervoor dat de zichtbare tekst van het element eerst in de toegankelijke naam.

UIKit

In storyboard:

1. Selecteer het element met een LabelAtFront probleem
2. Zorg ervoor dat het Inspectors-paneel zichtbaar is
3. Selecteer de Identiteitsinspecteur.
4. Onder Toegankelijkheid is er een categorie genaamd „Label“. Voer een label in dat ofwel exact overeenkomt met of begint met de zichtbare tekst.

In de code:

Zoek waar het toegankelijkheidslabel is ingesteld en controleer of de accessibilityLabelwaarde overeenkomt of begint met alle zichtbare tekst van het element.

button.title = "Send"
button.accessibilityLabel = "Send email"

SwiftUI

Zorg ervoor dat u een toegankelijkheidslabel instelt dat overeenkomt met of begint met alle zichtbare tekst van het element.

Button(action: {
    openMenu()
}) {
    Text("Menu")
}

React Native

De accessibilityLabel eigenschap moet beginnen met de zichtbare tekst van het element.

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

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

Als u ervoor kiest om de accessibilityLabel van een knop aan te passen, zorg ervoor dat deze begint met de tekst van de title.

<Button 
   title={'Log In'}
   mode='contained'
   accessibilityLabel='Log In to Transfer Money'
/>

Voor andere elementen zonder expliciete titel, of wanneer u de accessibilityLabel expliciet instelt, zorg ervoor dat de accessibilityLabel begint met de zichtbare tekst van het element.

<View style={styles.container}>
   <Button title='Menu' accessibilityLabel='Menu: Tap to Open'>
</View>

Kan ik deze regel negeren?

De Regel „Label aan de Voorzijde“ handhaaft een best practice genoteerd door WCAG als onderdeel van WCAG 2.1 2.5.3 A. Deze regel heeft een geringe impact en kan genegeerd worden als je meer serieuze problemen wilt prioriteren. Je kunt regels die zijn gecategoriseerd als 'Beste Practice' uitschakelen vanaf het Mobile Dashboard, of door de regel te negeren in tests die voor iOS zijn geschreven.

Hulpmiddelen

• Richtlijnen voor Toegankelijke Webcontent (WCAG) 2.1, W3C-aanbeveling
  • Succescriterium 2.5.3 - Label in Naam
• WCAG 2.1 Begripsdocumenten
  • Begrijpen van SC 2.5.3: Label in Naam