Etikett auf der Vorderseite

Jeder sichtbare Text eines interaktiven Elements sollte am Anfang des barrierefreien Namens des Elements stehen.

Diese Regel erzwingt eine bewährte Vorgehensweise, die von der WCAG als Teil der WCAG 2.1 2.5.3 A festgelegt wurde. Sie können Regeln deaktivieren , die als „Best Practice“ kategorisiert sind, im Mobile Dashboard oder indem Sie die Regel in für Android geschriebenen Tests ignorieren.

Auswirkung

TalkBack-Benutzer erwarten, dass bei der Interaktion mit einem Steuerelement zuerst der zugängliche Name angesagt wird. Als bewährte Methode empfehlen wir, den sichtbaren Text des Steuerelements im Namen und alle anderen Informationen im zugänglichen Wert, Hinweis oder der Rolle zu platzieren.

Bestätigung

1. TalkBack aktivieren
2. Fokussieren Sie das Element
3. Eines der folgenden Ereignisse wird eintreten:
   • Nicht zugänglich: TalkBack sagt anderen Text an, bevor der Text des aktiven Steuerelements angesagt wird
   • Zugänglich: TalkBack sagt zuerst den Text des aktiven Steuerelements an

So beheben Sie das Problem

Ein von dieser Regel festgestelltes Problem wird dadurch verursacht, dass am Anfang der Inhaltsbeschreibung des Steuerelements sichtbarer Text fehlt.

XML

Für eine bereitgestellte Schaltfläche:

<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" />

Bestandenes Beispiel:

val button = findViewById<Button>(R.id.email_button)
button.contentDescription = "Send Email"

Fehlerhaftes Beispiel: Beachten Sie, dass der sichtbare Text am Anfang der Inhaltsbeschreibung nicht vorhanden ist.

val button = findViewById<Button>(R.id.email_button)
button.contentDescription = "Tap to Send Email"

Compose

Bestandenes Beispiel:

Text(modifier = Modifier.semantics { contentDescription = "Send Email" }, text = "Send")

Fehlerhaftes Beispiel: Beachten Sie, dass der sichtbare Text am Anfang der Inhaltsbeschreibung nicht vorhanden ist.

Text(modifier = Modifier.semantics { contentDescription = "Click to Send" }, text = "Send")

React Native

Die accessibilityLabel Eigenschaft sollte mit dem sichtbaren Text der Komponente beginnen.

Standardmäßig verwendet eine Schaltfläche ihren Titel als accessibilityLabel und erfüllt daher diese Regel.

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

Wenn Sie die accessibilityLabel Anpassung für eine Schaltfläche vornehmen möchten, stellen Sie sicher, dass sie mit dem Text der title beginnt.

<Button 
   title={'Log In'}
   mode='contained'
   accessibilityLabel='Log In to Transfer Money'
/>
For other components without an explicit title, or when setting the `accessibilityLabel` explicitly, ensure that the `accessibilityLabel` begins with the component's visible text.
```jsx
<View style={styles.container}>
   <Button title='Menu' accessibilityLabel='Menu: Tap to Open'>
</View>