Beschriftung am Anfang

Erfahren Sie, wie wir künstliche Intelligenz für diese Regel einsetzen!

Was wir überprüfen

Wenn ein interaktives Element eine sichtbare Beschriftung hat, sollte diese am Anfang des Namens stehen, der von unterstützenden Technologien (AT) bekanntgegeben wird, noch vor jeglichen zusätzlichen Informationen.

Fehlendes Beispiel ❌

Der Button name ist „Kontoanmeldung“

VoiceOver wird als „Kontoanmeldung, Button“ angekündigt - die sichtbare Beschriftung „Anmelden“ steht nicht am Anfang

Voice Control - Benutzer sagt „Anmelden“
Dies könnte den Button nicht aktivieren, da der Name mit „Konto“ beginnt, nicht mit „Anmelden“

Erfolgreiches Beispiel ✅

Der Button name ist „Anmelden mit Konto“

VoiceOver wird als „Anmelden mit Konto, Button“ angekündigt - die sichtbare Beschriftung „Anmelden“ steht an erster Stelle

Voice Control - Benutzer sagt „Anmelden“
Dies aktiviert den Button, da der Name mit der sichtbaren Beschriftung beginnt

Auf einen Blick

• Diese Regel hat einen geringen Einfluss auf die Nutzer und erzwingt eine WCAG-Best Practice
• Sichtbarer Text zuerst: Beginnen Sie immer den Namen eines Elements genau mit dem, was sehende Nutzer auf dem Bildschirm wahrnehmen
• Kontext an zweiter Stelle: Fügen Sie hilfreiche Informationen zum Namen des Elements nach dem sichtbaren Text hinzu

Auswirkungen auf Nutzer

Personen, die unterstützende Technologien verwenden, müssen schnell verstehen, was ein Element tut, und in der Lage sein, einfach damit zu interagieren. Wenn zusätzliche Wörter vor dem zugänglichen Namen kommen, verlangsamt dies die Navigation und macht Ihre App für AT-Nutzer weniger effizient.

• VoiceOver - Einige Nutzer wechseln zwischen Modalitäten — indem sie sowohl einen Bildschirmleser als auch die Spracheingabe verwenden. Konsistenz beim Platzieren des sichtbaren Textes am Anfang des Namens reduziert Verwirrung, wenn man vergleicht, was ein sehender Benutzer wahrnehmen kann im Gegensatz zu dem, was von VoiceOver angekündigt wird.
• Sprachsteuerung - Spracherkennungs-Engines verlassen sich oft auf den Anfang eines zugänglichen Namens, um festzustellen, welches Element der Nutzer anvisiert. Wenn die sichtbare Beschriftung am Anfang des zugänglichen Namens steht, wird die Übereinstimmung eindeutig, und die Möglichkeit, dass ein Nutzer ein Element nicht aktivieren kann, wird reduziert. Eine von uns empfohlene Best Practice ist, nur den sichtbaren Text eines Elements in den Namen aufzunehmen und sekundäre Informationen in den zugänglichen Wert, Hinweis oder die Rolle zu setzen.

Hinweis: Je nach Programmiersprache kann die 'Name'-Eigenschaft für ein Element unterschiedlich benannt sein. In Swift und React Native wird sie zum Beispiel als Accessibility-Label bezeichnet.

Beschriftung am Anfang Problem bestätigen

1. VoiceOver einschalten
2. Element fokussieren
3. Eines der folgenden Ereignisse wird eintreten:
   • Unzugänglich: Der zuerst von VoiceOver angekündigte Text unterscheidet sich vom sichtbaren Text des Elements
   • Zugänglich: VoiceOver kündigt zuerst den sichtbaren Text des Elements an

Probleme beheben

Um Beschriftung am Anfang Probleme zu beheben, stimmen Sie den Textinhalt und den zugänglichen Namen so genau wie möglich ab. Vermeiden Sie unnötige Wörter wie „Hier klicken, um...“ oder „Tippen Sie, um...“, und benennen Sie das Element so, dass es dem Nutzer die Aktion ausdrücklich angibt.

Manchmal ist es notwendig, den zugänglichen Namen eines Elements zu erweitern, um mehr Kontext zu bieten. Zum Beispiel:

• Sichtbare Beschriftung: „Posteingang, 5“, Name: „Posteingang, 5 ungelesene Nachrichten“
• Sichtbare Beschriftung: „Löschen“, Name: „Benutzerprofil löschen“

Um Beschriftung am Anfang Probleme in solchen Fällen zu vermeiden, stellen Sie sicher, dass der sichtbare Text des Elements zuerst in seinem zugänglichen Namen erscheint.

UIKit

Im Storyboard:

1. Wählen Sie das Element mit einem LabelAtFront Problem aus
2. Stellen Sie sicher, dass das Inspektoren-Panel sichtbar ist
3. Wählen Sie den Identitätsinspektor aus.
4. Unter Barrierefreiheit gibt es eine Kategorie namens „Beschriftung“. Tragen Sie eine Beschriftung ein, die entweder genau mit dem sichtbaren Text übereinstimmt oder damit beginnt.

Im Code:

Finden Sie heraus, wo die Accessibility-Beschriftung festgelegt wurde, und überprüfen Sie, dass der Wert von accessibilityLabel entweder mit dem gesamten sichtbaren Text des Elements übereinstimmt oder damit beginnt.

button.title = "Send"
button.accessibilityLabel = "Send email"

SwiftUI

Stellen Sie sicher, dass Sie eine Accessibility-Beschriftung festlegen, die entweder mit dem gesamten sichtbaren Text des Elements übereinstimmt oder damit beginnt.

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

React Native

Die accessibilityLabel-Eigenschaft sollte mit dem sichtbaren Text des Elements beginnen.

Standardmäßig verwendet ein Button seinen Titel als accessibilityLabel und erfüllt daher diese Regel.

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

Wenn Sie das accessibilityLabel eines Buttons anpassen, stellen Sie sicher, dass es mit dem Text des title beginnt.

<Button 
   title={'Log In'}
   mode='contained'
   accessibilityLabel='Log In to Transfer Money'
/>

Für andere Elemente ohne expliziten Titel oder wenn das accessibilityLabel explizit festgelegt wird, stellen Sie sicher, dass das accessibilityLabel mit dem sichtbaren Text des Elements beginnt.

<View style={styles.container}>
   <Button title='Menu' accessibilityLabel='Menu: Tap to Open'>
</View>

Kann ich diese Regel ignorieren?

Die Regel „Label am Anfang“ erzwingt eine von WCAG als Teil von WCAG 2.1 2.5.3 A notierte bewährte Praxis. Diese Regel hat nur geringfügige Auswirkungen und kann ignoriert werden, wenn Sie ernstere Probleme priorisieren möchten. Sie können deaktivieren Sie Regeln, die als „Best Practice“ kategorisiert sind, vom Mobile Dashboard oder indem Sie Ignorieren der Regel in Tests, die für iOS geschrieben wurden.

Ressourcen

• Richtlinien für barrierefreie Webinhalte (WCAG) 2.1, W3C-Empfehlung
  • Erfolgskennzeichen 2.5.3 - Label im Namen
• WCAG 2.1 Verständnisdokumente
  • Verständnis von SC 2.5.3: Label im Namen