Label vooraan

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

Mislukt voorbeeld ❌

De knop name is „Account inloggen“

VoiceOver kondigt „Account inloggen, knop“ aan - het zichtbare label „Inloggen“ staat niet vooraan

Voice Control - Gebruiker zegt „Inloggen“
Dit activeert mogelijk de knop niet omdat de naam begint met „Account“ en niet met „Inloggen“

Geslaagd voorbeeld ✅

De knop name is „Inloggen bij account“

VoiceOver kondigt „Inloggen bij account, knop“ aan - het zichtbare label „Inloggen“ komt eerst

Voice Control - Gebruiker zegt „Inloggen“
Dit activeert de knop omdat de naam begint met het zichtbare label

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 — ze gebruiken zowel een schermlezer als spraakopdrachten. Consistentie bij het plaatsen van zichtbare tekst aan het begin van de naam vermindert verwarring bij het vergelijken van wat een ziende gebruiker kan waarnemen versus wat door VoiceOver wordt aangekondigd.
• Stemcontrole - Spraakherkenningssystemen vertrouwen vaak op het begin van een toegankelijke naam om te bepalen welk element de gebruiker wil activeren. Door het zichtbare label aan het begin van de toegankelijke naam te plaatsen, wordt de overeenkomst ondubbelzinnig, waardoor de kans kleiner wordt dat een gebruiker een element niet kan activeren. Een aanbevolen werkwijze is alleen de zichtbare tekst van een element binnen de naam te hebben, en secundaire informatie binnen 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 Label aan de Voorzijde-problemen te voorkomen in gevallen zoals deze, zorg ervoor dat de zichtbare tekst van het element eerst komt in zijn 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 waarde van de accessibilityLabel overeenkomt met 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 eigenschap accessibilityLabel moet beginnen met de zichtbare tekst van het element.

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

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

Als u ervoor kiest de accessibilityLabel voor een knop aan te passen, zorg er dan voor 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 de accessibilityLabel expliciet wordt ingesteld, 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 Label aan de Voorzijde-regel handhaaft een aanbevolen werkwijze zoals opgemerkt door WCAG als onderdeel van WCAG 2.1 2.5.3 A. Deze regel heeft een klein effect en kan genegeerd worden als u ernstigere problemen wilt prioriteren. U 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 SC 2.5.3: Label in Naam