Etikett im Namen

Eine fokussierbare Zugänglichkeitsansicht sollte sicherstellen, dass ihr Name ihre sichtbare Beschriftung enthält.

Auswirkung

VoiceOver-Benutzer sollten Zugriff auf dieselben Informationen haben, die auf dem Bildschirm angezeigt werden. Aktualisieren Sie bei jeder Aktualisierung des Textes eines Bedienelements das Barrierefreiheits-Label, sodass es den neuen Text enthält.

Bestätigung

1. VoiceOver aktivieren
2. Konzentrieren Sie sich auf das Element
3. Eines der folgenden Ereignisse wird eintreten:
   • Nicht zugänglich: VoiceOver gibt Text an, der nicht den sichtbaren Text des aktiven Bedienelements enthält.
   • Zugänglich: VoiceOver gibt Text an, der den sichtbaren Text des aktiven Bedienelements enthält.
   • Barrierefrei: VoiceOver gibt den sichtbaren Text des aktiven Steuerelements bekannt.

So beheben Sie das Problem

Ein von dieser Regel gefundenes Problem wird dadurch verursacht, dass in der Barrierefreiheitsbeschriftung des Steuerelements ein Teil oder der gesamte sichtbare Text fehlt.

UIKit

Im Storyboard:

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

Im Code:

Suchen Sie, wo das Barrierefreiheitslabel festgelegt wurde, und stellen Sie sicher, dass der Wert des Barrierefreiheitslabels entweder mit dem gesamten sichtbaren Text der Komponente übereinstimmt oder diesen enthält.

button.title = "Login"
button.accessibilityLabel = "Submit login"

SwiftUI

Legen Sie eine Barrierefreiheitsbezeichnung fest, die entweder mit dem sichtbaren Text der Komponente übereinstimmt oder diesen enthält.

Button(action: {
    openMenu()
}) {
    Text("Menu")
}.accessibility(label: Text("Main Menu"))

React Native

Die accessibilityLabel Eigenschaft sollte entweder mit dem sichtbaren Text der Komponente übereinstimmen oder ihn enthalten.

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

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

Verwenden Sie für interaktive Elemente ohne Titel eine Touch-View, die die Steuerungselemente und Textkomponenten enthält. Auf diese Weise wird die Textkomponente zur sichtbaren Beschriftung für das Steuerelement. Stellen Sie das accessibilityLabel des enthaltenden Elements so ein, dass es entweder mit dem sichtbaren Text übereinstimmt oder diesen enthält.

<TouchableOpacity
   style={styles.switchRow}
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel='Dark Mode'
   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>