Beschriftung im Namen

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

Was wir überprüfen

Wenn ein interaktives Element ein sichtbares Label hat, sollte der von unterstützender Technologie (AT) angekündigte Name derselbe sein.

Fehlerhaftes Beispiel ❌

Die Schaltfläche name ist „Log in“

VoiceOver wird als „Log in, Schaltfläche“ angekündigt - nicht übereinstimmend mit dem sichtbaren Label „Sign In“

Voice Control - Benutzer sagt „Sign In“
Dies wird die Schaltfläche nicht aktivieren, da ihr Name „Log in“ und nicht „Sign In“ ist

Erfolgreiches Beispiel ✅

Die Schaltfläche name ist „Sign In“

VoiceOver wird als „Sign In, Schaltfläche“ angekündigt - entspricht dem sichtbaren Label

Voice Control - Benutzer sagt „Sign In“
Dies aktiviert die Schaltfläche, da der Name dem sichtbaren Label entspricht

Auf einen Blick

• Diese Regel hat ernsthafte Auswirkungen für Benutzer
• Sichtbaren Text abgleichen: Wenn sehende Benutzer eine „Sign in“-Schaltfläche sehen können, stellen Sie sicher, dass Bildschirmleser auch „Sign in“ ankündigen
• Es ist in Ordnung, zusätzlichen Kontext hinzuzufügen: „Speichern“ kann zu „Dokument speichern“ werden
• Niemals sichtbare Wörter weglassen: Bildschirmleser sollten eine „Katalog durchsuchen“-Schaltfläche ankündigen, nicht nur „Suchen“

Auswirkungen auf Benutzer

Personen, die unterstützende Technologien wie VoiceOver verwenden und/oder Sehbehinderungen haben, sind am meisten von den festgestellten Problemen betroffen. Probleme mit der Beschriftung im Namen können zu einer verwirrenden oder widersprüchlichen Erfahrung zwischen den Ankündigungen von VoiceOver und dem Inhalt auf dem Bildschirm führen.

Wenn eine Schaltfläche sichtbaren Text mit der Aufschrift „Sign In“ hat, sollte VoiceOver auch „Sign In“ ankündigen — und nicht etwas anderes, wie „Log in“.

Hinweis: Je nach Programmiersprache kann die 'Name'-Eigenschaft eines Elements anders genannt werden. In Swift und React Native wird sie beispielsweise als Zugänglichkeitsbezeichnung bezeichnet.

Beschriftung im Namen überprüfen

1. VoiceOver aktivieren
2. Versuchen, den Fokus auf das Element zu setzen
3. Eines der folgenden Ereignisse wird eintreten:

• Nicht zugänglich: Der von VoiceOver angekündigte Text unterscheidet sich vom sichtbaren Text des Elements
  • Zugänglich: Der von VoiceOver angekündigte Text ist derselbe oder enthält den sichtbaren Text des Elements
• Zugänglich: VoiceOver wird den sichtbaren Text des Elements ankündigen.

Probleme beheben

Um Probleme mit der Beschriftung im Namen zu lösen, setzen Sie einen Namen für das Element, der entweder dem sichtbaren Text entspricht oder diesen enthält.

Wenn der sichtbare Text beschreibend und eindeutig ist, wird empfohlen, dass der Name genau dem Text entspricht.

Wenn der sichtbare Text allein den AT-Benutzern (z.B. Bildschirmleser) die Funktion des Elements nicht ausdrücklich mitteilt, wäre es ratsam, den zugänglichen Namen zu erweitern, um mehr Kontext zu bieten. Zum Beispiel:

• Sichtbares Label: „Posteingang, 5“, Name: „Posteingang, 5 ungelesene Nachrichten“
• Sichtbares Label: „Löschen“, Name: „Benutzerprofil löschen“

UIKit

Im Storyboard:

1. Wählen Sie das Element mit einem LabelInName Problem aus
2. Stellen Sie sicher, dass das Inspektorfenster sichtbar ist
3. Wählen Sie den Identitätsinspektor
4. Unter „Zugänglichkeit“ gibt es eine Kategorie namens „Beschriftung“. Geben Sie eine Beschriftung ein, die genau mit dem sichtbaren Text übereinstimmt oder diesen enthält.

Im Code:

Finden Sie heraus, wo die Zugänglichkeitsbezeichnung gesetzt wurde, und stellen Sie sicher, dass der Wert der Zugänglichkeitsbezeichnung entweder mit dem sichtbaren Text des Elements übereinstimmt oder ihn enthält.

button.title = "Search"
button.accessibilityLabel = "Search the store"
// Not an exact match, but the accessibilityLabel includes all the visible text

SwiftUI

Setzen Sie ein Barrierefreiheits-Label, das entweder mit dem sichtbaren Text übereinstimmt oder diesen enthält.

Button(action: {
    openMenu()
}) {
    Text("Sign in")
}.accessibility(label: Text("Sign in"))
// The visible text and accessibility label match exactly

React Native

Die Eigenschaft accessibilityLabel sollte entweder mit dem sichtbaren Text übereinstimmen oder diesen enthalten.

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

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

Für interaktive Elemente ohne Titel verwenden Sie eine berührbare Ansicht, die die Steuer- und Textkomponenten enthält. Auf diese Weise wird das Textelement zum sichtbaren Label der Steuerung. Setzen Sie das accessibilityLabel des enthaltenden Elements so, dass es entweder mit dem sichtbaren Text übereinstimmt oder ihn enthält.

<TouchableOpacity
   style={styles.switchRow}
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel='Subscribe to notifications'
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
     setIsEnabled(!isEnabled)
   }}> 
     <Text style={{ fontSize: 22 }}> 
        Subscribe
     </Text>
     <Switch
        trackColor={{ false: 'lightgray', true: 'dimgray' }}
        ios_backgroundColor={'lightgray'}
        thumbColor={'white'}
        accessibilityElementsHidden={true}
        importantForAccessibility='no-hide-descendants'
        value={isEnabled}

         onValueChange={() => {
           setIsEnabled(!isEnabled);
         }}
     />
</TouchableOpacity>

Kann ich diese Regel ignorieren?

Label In Name hat einen Schwerwiegender Einfluss für Nutzer, und wir empfehlen, Maßnahmen zur Behebung dieses Problems zu ergreifen, außer in seltenen Fällen. Wenn Sie beispielsweise einen Button mit sichtbarem Text haben, der „Visa Card xxxx-xxxx-xxxx-1234“ anzeigt, möchten Sie möglicherweise, dass der von VoiceOver angekündigte Text sagt „Visa Card endet mit 1-2-3-4“. Da der Text auf dem Button nicht mit dem von VoiceOver angekündigten Namen übereinstimmt, würde dies zu einem Fehler bei Label in Name führen. In einem solchen Fall wäre es sinnvoll, die Regel zu ignorieren. Erfahren Sie mehr über Regeln ignorieren.

Ressourcen

Deque University Kursseiten

• 2.5.3 Label in Name (A)
• Erfolgskriterium 2.5.3 - Label in Name
• Anforderungen - 2.5.3.a Label in Name

Hinweis: Der vollständige Zugang zu Deque University-Ressourcen erfordert ein Abonnement.

Weitere Ressourcen

• Richtlinien für barrierefreie Webinhalte (WCAG) 2.1, W3C Empfehlung
  • Erfolgskriterium 2.5.3 - Label in Name
• WCAG 2.1 Verständlichkeitsdokumente
  • Verständlichkeit 2.5.3 A - Label in Name