Bezeichnung am Anfang
Erfahren Sie, wie wir künstliche Intelligenz für diese Regel einsetzen!
Was wir überprüfen
Wenn ein interaktives Element ein sichtbares Label hat, sollte dieses am Anfang des von unterstützender Technologie (AT) angekündigten Namens stehen, vor jeglichen zusätzlichen Informationen.
Fehlerhaftes Beispiel ❌
Die Taste name ist „Account sign in“
TalkBack kündigt „Account sign in, Button“ an — das sichtbare Label „Sign In“ steht nicht am Anfang
Voice Access - Benutzer sagt „Sign In“
Dies aktiviert die Taste möglicherweise nicht, da der Name mit „Account“ und nicht mit „Sign In“ beginnt
Korrektes Beispiel ✅
Die Taste name ist „Sign in to account“
TalkBack kündigt „Sign in to account, Button“ an - das sichtbare Label „Sign In“ steht zuerst
Voice Access - Benutzer sagt „Sign In“
Dies aktiviert die Taste, da der Name mit dem sichtbaren Label beginnt
Auf einen Blick
- Diese Regel hat einen geringen Einfluss auf die Nutzer und verstärkt eine WCAG-Wertepraxis
- Sichtbarer Text zuerst: Beginnen Sie den Namen eines Elements immer mit genau dem, was sehende Nutzer auf dem Bildschirm wahrnehmen
- Kontext zweitens: Fügen Sie hilfreiche Informationen nach dem sichtbaren Text zum Namen des Elements hinzu
Auswirkung auf die Benutzer
Menschen, die unterstützende Technologien nutzen, müssen schnell verstehen, was ein Element tut, und in der Lage sein, leicht damit zu interagieren. Wenn zusätzliche Wörter vor dem zugänglichen Namen kommen, verlangsamt dies die Navigation und macht Ihre App weniger effizient für AT-Nutzer.
- Talkback - Einige Benutzer wechseln zwischen Modalitäten — sie nutzen sowohl einen Screenreader als auch die Spracheingabe. Die Konsistenz, den sichtbaren Text am Anfang des Namens zu platzieren, verringert die Verwirrung beim Vergleich dessen, was ein sehender Benutzer wahrnehmen kann, mit dem, was von Talkback angekündigt wird.
- Voice Access - Spracherkennungsmaschinen verlassen sich oft auf den Anfang eines zugänglichen Namens, um zu bestimmen, welches Element der Benutzer anvisiert. Das sichtbare Label am Anfang des zugänglichen Namens zu platzieren, macht die Übereinstimmung eindeutig und verringert die Möglichkeit, dass ein Benutzer ein Element nicht aktivieren kann. Eine von uns empfohlene Bestpraxis ist, nur den sichtbaren Text eines Elements im Namen zu haben und sekundäre Informationen im zugänglichen Wert, Hinweis oder Rolle unterzubringen.
Hinweis: Je nach Programmiersprache kann die 'Name'-Eigenschaft für ein Element anders benannt sein. Bei XML oder Compose wird sie Inhaltsbeschreibung genannt. Bei React Native heißt sie Zugänglichkeitslabel.
Problem der Bezeichnung am Anfang bestätigen
- Aktivieren Sie TalkBack
- Fokussieren Sie das Element
- Eines der folgenden wird passieren:
- Nicht zugänglich: Der Text, der zuerst von TalkBack angekündigt wird, unterscheidet sich vom sichtbaren Text des Elements
- Zugänglich: TalkBack wird zuerst den sichtbaren Text des Elements ankündigen
Probleme beheben
Um Probleme mit der Bezeichnung am Anfang zu beheben, stimmen Sie den Textinhalt und den zugänglichen Namen genau ab, wenn möglich. Vermeiden Sie die Verwendung von überflüssigen Wörtern wie „Klicken Sie hier...“ oder „Tippen Sie um...“, und benennen Sie das Element so, dass es die Aktion dem Benutzer eindeutig mitteilt.
Manchmal ist es notwendig, den zugänglichen Namen eines Elements zu erweitern, um mehr Kontext einzubeziehen. Zum Beispiel:
- Sichtbares Label: „Posteingang, 5“, Name: „Posteingang, 5 ungelesene Nachrichten“
- Sichtbares Label: „Löschen“, Name: „Benutzerprofil löschen“
Um Probleme mit der Bezeichnung am Anfang in solchen Fällen zu vermeiden, stellen Sie sicher, dass der sichtbare Text des Elements erstes in seinem zugänglichen Namen steht.
XML
Für eine Taste mit sichtbarem Text, der „Senden“ sagt:
<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" />Der sichtbare Text für die Taste steht zuerst in ihrer Inhaltsbeschreibung, und zusätzliche Informationen folgen.
val button = findViewById<Button>(R.id.email_button)
button.contentDescription = "Send Email"Compose
Für ein klickbares Textelement mit sichtbarem Text, das „Senden“ sagt, steht der sichtbare Text der Taste contentDescription zuerst, und zusätzliche Informationen folgen.
Text(modifier = Modifier.semantics { contentDescription = "Send Email" }, text = "Send")React Native
Die accessibilityLabel-Eigenschaft sollte mit dem sichtbaren Text des Elements beginnen.
Standardmäßig verwendet eine Taste ihren Titel als ihren accessibilityLabel und erfüllt damit diese Regel.
<Button
title={'Menu'}
mode='contained'
accessibilityLabel='Menu'
/>Wenn Sie sich entscheiden, den accessibilityLabel einer Taste anzupassen, stellen Sie sicher, dass er mit dem Text des title beginnt.
<Button
title={'Log In'}
mode='contained'
accessibilityLabel='Log In to Transfer Money'
/>Wenn Sie den accessibilityLabel explizit festlegen, stellen Sie sicher, dass der accessibilityLabel mit dem sichtbaren Text des Elements beginnt.
<View style={styles.container}>
<Button title='Menu' accessibilityLabel='Menu: Tap to expand/collapse'>
</View>Kann ich diese Regel ignorieren?
Die Regel „Label vorne“ erzwingt eine bewährte Vorgehensweise, die von WCAG als Teil von WCAG 2.1 2.5.3 A vermerkt ist. Diese Regel hat nur einen geringen Einfluss und kann ignoriert werden, wenn Sie ernsthaftere Probleme priorisieren möchten. Sie können deaktivieren Sie Regeln, die als „Best Practice“ kategorisiert sind, vom Mobile Dashboard, oder indem Sie indem Sie die Regel in Tests für Android ignorieren.
Häufig gestellte Fragen
Gibt es bei dieser Regel bekannte Einschränkungen?
Ja. Ein Regelverstoß kann auftreten, wenn der sichtbare Text eines interaktiven Elements eine Abkürzung (z.B. „GB“, „km“) oder eine verdeckte / abgeschnittene Kennung enthält, und die Barrierefreiheitsankündigung aus den dargestellten Wörtern besteht (z.B. „Gigabyte“, „Kilometer“), obwohl dies das empfohlene Muster ist, um abgekürzte oder gekürzte Inhalte bildschirmleserfreundlich zu gestalten.
Ressourcen
- Web Content Accessibility Guidelines (WCAG) 2.1, W3C-Empfehlung
- WCAG 2.1 Verständnis-Dokumente