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 diese Regel über das Mobile Dashboard deaktivieren oder indem Sie die Regel in für iOS geschriebenen Tests ignorieren.

Erfahren Sie, wie Sie Regeln im Mobile Dashboard deaktivieren.

Auswirkung

VoiceOver-Benutzer erwarten, dass bei der Interaktion mit einem Steuerelement zuerst der barrierefreie 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. VoiceOver aktivieren
2. Fokussieren Sie das Element
3. Eines der folgenden Ereignisse wird eintreten:
   • Nicht zugänglich: VoiceOver sagt anderen Text an, bevor es den Text des aktiven Steuerelements ansagt
   • Zugänglich: VoiceOver 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 Barrierefreiheitsbeschriftung des Steuerelements sichtbarer Text fehlt.

UIKit

Im Storyboard:

1. Wählen Sie das Element mit einem LabelAtFront Problem aus
2. Stellen Sie sicher, dass das Inspektorenfenster sichtbar ist
3. Wählen Sie den Identitätsinspektor aus.
4. Unter „Barrierefreiheit“ gibt es eine Kategorie namens „Label“. Geben Sie eine Bezeichnung ein, die entweder exakt mit dem sichtbaren Text übereinstimmt oder mit diesem beginnt.

Im Code:

Suchen Sie, wo das Zugänglichkeitsetikett festgelegt wurde, und überprüfen Sie, ob der Wert von accessibilityLabel entweder mit dem gesamten sichtbaren Text der Komponente übereinstimmt oder mit diesem beginnt.

button.title = "Login"
button.accessibilityLabel = "Login to Your Account"

SwiftUI

Stellen Sie sicher, dass Sie eine Barrierefreiheitsbezeichnung festlegen, die entweder mit dem gesamten sichtbaren Text der Komponente übereinstimmt oder mit diesem beginnt.

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

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>