Name des aktiven Steuerelements

Jede interaktive Ansicht sollte einen zugänglichen Namen haben, der für unterstützende Technologien wie VoiceOver und Sprachsteuerung verfügbar ist.

Auswirkung

Am stärksten betroffen sind Benutzer von VoiceOver. Ein Steuerelement ohne Namen vermittelt der Person, die mit dem Steuerelement interagiert, nicht den vollständigen Kontext oder Zweck.

Bestätigung

1. VoiceOver aktivieren
2. Fokussieren Sie das Steuerelement
3. Eines der folgenden Ereignisse wird eintreten:
   • Nicht zugänglich: Es wird nicht sein Name angekündigt, sondern nur seine Rolle und sein Wert, falls vorhanden.
   • Barrierefrei: Der Name wird in VoiceOver angekündigt.

So beheben Sie das Problem

UIKit

Um ein von dieser Regel gefundenes Problem zu beheben, fügen Sie dem Steuerelement ein accessibilityLabel hinzu.

button.accessibilityLabel = "Deque Systems Website"

SwiftUI

Stellen Sie sicher, dass der Text des Steuerelements aussagekräftig ist, oder geben Sie ein accessibilityLabel ein, wenn mehr Kontext benötigt wird.

Anwendungsfall: Schaltfläche mit einem Bild als Beschriftung

Stellen Sie sicher, dass das Bild einen aussagekräftigen Namen hat. Beachten Sie, dass diese Option nicht verfügbar ist, wenn mehrere Sprachen unterstützt werden. Wenn der Name nicht praktikabel ist, legen Sie ein accessibilityLabel auf das Bild.

Alternativ können Sie das Steuerelement und seine Unteransichten zu einem Element kombinieren. Wenn kein aussagekräftiger Text verfügbar ist, setzen Sie wie unten gezeigt ein accessibilityLabel für die gesamte Ansicht fest.

var body: some View {
    HStack(alignment: .center, spacing: 10,
           content: {
        Text("axe DevTools for iOS")
        Spacer()
        Button(action: { openLink() },
               label: {
            Image(systemName: "arrow.up.forward.app")
                .accessibilityHidden(true)
                .frame(minWidth: 50, minHeight: 50)
        })
        .accessibility(removeTraits: .isStaticText)
        .accessibility(removeTraits: .isButton)
        .accessibility(addTraits: .isLink)
    }).padding(16)
        .accessibilityElement(children: .combine)
}

React Native

Um ein von dieser Regel gefundenes Problem zu beheben, fügen Sie der Steuerkomponente ein accessibilityLabel hinzu.

<TextInput
  ...
  accessibilityLabel="First Name"
/>

Wenn Elemente in einer enthaltenen Ansicht gruppiert sind, fügen Sie die accessible -Eigenschaft und die accessibilityLabel -Eigenschaft zur enthaltenen Ansicht hinzu:

<View
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel={"Dark Mode"}
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
      setIsEnabled(!isEnabled) 
    }}
 >            
    <Switch
      trackColor={{ false: 'lightgray', true: 'dimgray' }}
      ios_backgroundColor={'lightgray'}
      thumbColor={'white'}
      onValueChange={ () => {
         setIsEnabled(!isEnabled)
      }}
      value={isEnabled}
      accessibilityElementsHidden={true}
     />
</View>