Beschriftung im Namen

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

Was wir überprüfen

Wenn ein interaktives Element eine sichtbare Beschriftung hat, sollte der Name, den die unterstützende Technologie (AT) ankündigt, derselbe sein.

Fehlschlagendes Beispiel ❌

Die Schaltfläche name lautet „Log in“

TalkBack wird als „Log in, Schaltfläche“ angekündigt - und stimmt nicht mit der sichtbaren Beschriftung „Sign In“ überein

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

Erfolgreiches Beispiel ✅

Die Schaltfläche name lautet „Sign In“

TalkBack wird als „Sign In, Schaltfläche“ angekündigt - und stimmt mit der sichtbaren Beschriftung überein

Voice Access - Benutzer sagt „Sign In“
Dies aktiviert die Schaltfläche, da der Name mit der sichtbaren Beschriftung übereinstimmt

Auf einen Blick

• Diese Regel hat eine erhebliche Auswirkung auf die Benutzer
• Stimmen Sie den sichtbaren Text ab: Wenn sehende Benutzer eine „Sign in“-Schaltfläche sehen können, stellen Sie sicher, dass Screenreader auch „Sign in“ ankündigen
• Es ist in Ordnung, zusätzlichen Kontext hinzuzufügen: „Speichern“ kann zu „Dokument speichern“ werden
• Lassen Sie niemals sichtbare Wörter weg: Screenreader sollten eine „Katalog durchsuchen“-Schaltfläche ankündigen, nicht nur „Suchen“

Auswirkungen auf Benutzer

Personen, die unterstützende Technologien wie TalkBack verwenden und/oder sehbeeinträchtigt sind, sind am stärksten von den erkannten Problemen betroffen. Probleme mit der Beschriftung im Namen können zu einer verwirrenden oder widersprüchlichen Erfahrung zwischen der Ankündigung von TalkBack und dem auf dem Bildschirm angezeigten Inhalt führen.

Wenn eine Schaltfläche sichtbaren Text mit „Sign In“ enthält, sollte TalkBack auch „Sign In“ ankündigen – nicht etwas anderes wie „Log in“.

Hinweis: Abhängig von der Programmiersprache kann die Eigenschaft 'Name' für ein Element anders benannt sein. Für XML oder Compose wird es als Inhaltsbeschreibung bezeichnet. Für React Native wird es als Zugänglichkeitskennzeichnung bezeichnet.

Beschriftung im Namen Problem bestätigen

1. TalkBack einschalten
2. Versuchen Sie, das Element zu fokussieren
3. Eines der folgenden wird passieren:
   • Nicht zugänglich: Der von TalkBack angekündigte Text unterscheidet sich vom sichtbaren Text des Elements
   • Zugänglich: Der von TalkBack angekündigte Text ist derselbe oder enthält den sichtbaren Text des Elements

Probleme beheben

Um Probleme mit der Beschriftung im Namen zu beheben, legen Sie einen Namen für das Element fest, der entweder dem sichtbaren Text entspricht oder diesen enthält.

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

Wenn der sichtbare Text allein den Benutzern von assistiven Technologien (z. B. einem Screenreader) die Aktion des Elements nicht explizit mitteilt, wäre es eine gute Idee, den zugänglichen Namen zu erweitern, um mehr Kontext einzuschließen. Zum Beispiel:

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

XML

Legen Sie eine Inhaltsbeschreibung fest, die entweder genau dem sichtbaren Text entspricht oder diesen enthält. Wenn das Element ein Button oder ein klickbares TextView ist:

Button button = .......
button.setText("Search");
button.setContentDescription("Search the store");

TextView textView = .......
textView.setText("Book Title");
textView.setContentDescription("Book title to search for");
// Not an exact match, but the accessibilityLabel includes all the visible text

Wenn das Element ein CheckBox ist, sehen Sie bitte CheckBox Name.

Compose

Stellen Sie sicher, dass das contentDescription des Elements genau dem sichtbaren Text entspricht oder diesen enthält.

@Composable
fun EmailButton() {
    Button(
        modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
        onClick = { … },
    ) { 
        Text(
            text = “Send”
        )
    }
}

React Native

Die accessibilityLabel-Eigenschaft sollte entweder dem sichtbaren Text entsprechen oder diesen enthalten.

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

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>
// The visible text and accessibility label match exactly

Für interaktive Elemente ohne Titel verwenden Sie eine berührbare Ansicht, die das Element und die Textkomponenten enthält. Auf diese Weise wird der bereitgestellte Text zur sichtbaren Beschriftung für das Element. Legen Sie das accessibilityLabel des beinhaltenden Elements so fest, dass es entweder dem sichtbaren Text entspricht oder diesen 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' }}
        thumbColor={'white'}
        accessibilityElementsHidden={true}
        importantForAccessibility='no-hide-descendants'
        value={isEnabled}

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

Kann ich diese Regel ignorieren?

Label im Namen hat einen Erheblicher Einfluss für Benutzer, und wir empfehlen, Schritte zur Behebung dieses Problems zu unternehmen, außer in seltenen Fällen. Wenn Sie beispielsweise einen Button mit sichtbarem Text „Visa-Karte xxxx-xxxx-xxxx-1234“ haben, möchten Sie vielleicht den von TalkBack angekündigten Text so einstellen, dass er „Visa-Karte, die mit 1-2-3-4 endet“ sagt. Da der Text auf dem Button nicht mit dem von TalkBack angekündigten Namen übereinstimmt, würde dies bei Label im Namen zu einem Fehlschlag führen. Aber 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 im Namen (A)
• Erfolgskriterium 2.5.3 - Label im Namen
• Anforderungen - 2.5.3.a Label im Namen

Hinweis: Vollzugriff auf die Ressourcen der Deque University erfordert ein Abonnement.

Andere Ressourcen

• Richtlinien für Barrierefreiheit von Webinhalten (WCAG) 2.1, W3C-Empfehlung
  • Erfolgskriterium 2.5.3 - Label im Namen
• WCAG 2.1 Verständnis-Dokumente
  • Verständnis 2.5.3 A - Label im Namen