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.

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
TalkBack	„Account aanmelden, knop“	„Aanmelden bij account, knop“
Voice Access	Gebruiker spreekt hardop „Aanmelden“ Dit activeert mogelijk de knop niet omdat de naam „Account aanmelden“ is, niet „Aanmelden“	Gebruiker spreekt hardop „Aanmelden“ Dit zou de knop moeten activeren omdat de naam "Aanmelden bij account" is

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 — door zowel een schermlezer als spraakinput te gebruiken. 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 Talkback aankondigt.
• Voice Access - Spraakherkenningsmotoren 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 verkleind dat een gebruiker een element niet kan activeren. Een aanbevolen best practice is om alleen de zichtbare tekst van een element binnen de naam op te nemen, en secundaire informatie onder te brengen in de toegankelijke waarde, hint of rol.

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

1. Zet TalkBack aan
2. Focus het element
3. 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 Voorkant in gevallen zoals deze te vermijden, zorg ervoor dat de zichtbare tekst van het element eerst in zijn toegankelijke naam.

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 tekstelement met zichtbare tekst die „Verzenden“ zegt, komt de zichtbare tekst van de knop eerst in zijn contentDescription, en aanvullende informatie volgt.

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 gebruiken als zijn accessibilityLabel, en daarom zal het deze regel doorstaan.

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

Als je 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'
/>

Bij het expliciet instellen van de accessibilityLabel , 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 regel 'Label aan de voorkant' handhaaft een beste praktijk die door WCAG wordt opgemerkt als onderdeel van WCAG 2.1 2.5.3 A. Deze regel heeft een kleine impact en kan genegeerd worden als je de voorkeur geeft aan serieuzere kwesties. 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
  • Succescriterium 2.5.3 - Label in Naam
• WCAG 2.1 Begripsdocumenten
  • Begrijpen SC 2.5.3: Label in Naam