Label aan de Voorkant
Leer hoe we kunstmatige intelligentie gebruiken voor deze regel!
Waar We Op Controleren
Als een interactief element een zichtbaar label heeft, moet dit aan het begin van de naam komen die door ondersteunende technologie (AT) wordt aangekondigd, vóór eventuele extra informatie.
Mislukt Voorbeeld ❌
De knop name is "Inloggen op account"
TalkBack meldt "Inloggen op account, knop" —-het zichtbare label "Inloggen" staat niet vooraan
Voice Access - Gebruiker zegt "Inloggen"
Dit activeert de knop mogelijk niet omdat de naam begint met "Account" in plaats van "Inloggen"
Geslaagd Voorbeeld ✅
De knop name is "Inloggen op account"
TalkBack meldt "Inloggen op account, knop" - het zichtbare label "Inloggen" komt eerst
Voice Access - Gebruiker zegt "Inloggen"
Dit activeert de knop omdat de naam begint met het zichtbare label
In Een 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 visueel waarneembaar is op het scherm
- Context tweede: Voeg nuttige informatie toe aan de naam van het element na de zichtbare tekst
Impact op Gebruikers
Mensen die gebruik maken van ondersteunende technologie moeten snel begrijpen wat een element doet en er gemakkelijk mee kunnen interacteren. Wanneer extra woorden vóór de toegankelijke naam komen, vertraagt dit de navigatie en maakt het uw app minder efficiënt voor AT-gebruikers.
- Talkback - Sommige gebruikers schakelen tussen modaliteiten — ze gebruiken zowel een schermlezer als spraakinput. Consistentie in 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 Talkback wordt aangekondigd.
- Voice Access - Spraakherkenningssystemen vertrouwen vaak op het begin van een toegankelijke naam om te bepalen welk element de gebruiker target. Door het zichtbare label aan het begin van de toegankelijke naam te plaatsen, wordt de overeenkomst ondubbelzinnig en wordt de kans verminderd dat een gebruiker een element niet kan activeren. Een aanbevolen praktijk is om alleen de zichtbare tekst van een element in 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 anders worden genoemd. Voor XML of Compose wordt het inhoudsbeschrijving genoemd. Voor React Native heet het een toegankelijkheidslabel.
Bevestig Probleem Label aan Voorkant
- Zet TalkBack aan
- Focus het element
- Een van de volgende dingen zal gebeuren:
- Onafhankelijk: De tekst die als eerste door TalkBack wordt aangekondigd is anders dan de zichtbare tekst van het element
- Toegankelijk: TalkBack zal eerst de zichtbare tekst van het element aankondigen
Los Problemen Op
Om problemen met Label aan Voorkant op te lossen, stem de tekstinhoud en toegankelijke naam exact af waar mogelijk. Vermijd het gebruik van overbodige woorden zoals „Klik hier om...“ of „Tik om...", en geef het element een naam die expliciet de actie aan de gebruiker vertelt.
Soms is het noodzakelijk om een 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 aan de Voorzijde in gevallen zoals deze te voorkomen, zorg ervoor dat de zichtbare tekst van het element eerst in zijn toegankelijke naam staat.
XML
Voor een knop met zichtbare tekst die „Verzenden“ zegt:
<Button
android:id="@+id/email_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/xlg"
android:text="Send"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/divider2" />De zichtbare tekst van de knop komt eerst in de inhoudsbeschrijving en aanvullende informatie volgt.
val button = findViewById<Button>(R.id.email_button)
button.contentDescription = "Send Email"Opstellen
Voor een klikbaar textelement met zichtbare tekst die "Verstuur" zegt, komt de zichtbare tekst voor de knop als eerste in zijn contentDescription en volgt aanvullende informatie.
Text(modifier = Modifier.semantics { contentDescription = "Send Email" }, text = "Send")React Native
De accessibilityLabel-eigenschap moet beginnen met de zichtbare tekst van het element.
Standaard zal een knop zijn titel als zijn accessibilityLabel gebruiken en zal hij dus voldoen aan deze regel.
<Button
title={'Menu'}
mode='contained'
accessibilityLabel='Menu'
/>Als je ervoor kiest om 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'
/>Wanneer je 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 expand/collapse'>
</View>Kan ik deze regel negeren?
De Label aan de Voorzijde-regel handhaaft een goede praktijk die is opgemerkt door WCAG als onderdeel van WCAG 2.1 2.5.3 A. Deze regel heeft een minimale impact en kan worden genegeerd als je ervoor kiest om meer ernstige problemen prioriteit te geven. Je kunt regels die zijn gecategoriseerd als 'Beste Praktijk' uitschakelen vanuit het Mobiele Dashboard, of door de regel te negeren in tests geschreven voor Android.
Middelen
- Web Content Accessibility Guidelines (WCAG) 2.1, W3C Aanbeveling
- WCAG 2.1 Begripsdocumenten