Aktiver Steuername

Was wir überprüfen

Ein interaktives Element sollte über einen zugänglichen Namen für unterstützende Technologien wie VoiceOver und Voice Control verfügen.

Fehlerhaftes Beispiel ❌

Kein Name (accessibilityLabel) festgelegt.

VoiceOver liest "Button"

Voice Control — der Benutzer spricht „Benachrichtigungen“
Element reagiert nicht, da es keinen Namen hat

Korrektes Beispiel ✅

accessibilityLabel=
'Notifications'

VoiceOver liest "Notifications, button"

Voice Control — der Benutzer spricht „Benachrichtigungen“
Element aktiviert, weil sein Name übereinstimmt

Auf einen Blick

• Diese Regel hat einen kritischen Einfluss auf die Benutzer
• Jedes interaktive Element benötigt einen Namen: Schaltflächen, Links und Eingaben benötigen alle einen zugänglichen Namen, den VoiceOver ansagen kann
• Wenn ein interaktives Element keinen sichtbaren Text hat, geben Sie diesen explizit mit accessibilityLabel an, um ihm einen aussagekräftigen Namen zu geben
• Lassen Sie VoiceOver nicht ohne etwas zu sagen: Ein Element, das nur seine Rolle oder seinen Wert - ohne Namen - bekannt gibt, gibt Benutzern keinen genauen Kontext, was es tut
• VoiceOver wird versuchen, etwas anzukündigen (wie den Text der Schaltfläche oder den Bildnamen), daher ist es am besten, einen genauen und bewussten Namen anzugeben

Auswirkung auf Benutzer

Menschen, die VoiceOver verwenden, sind am meisten betroffen. Ein interaktives Element ohne Namen wird den vollständigen Kontext oder Zweck nicht an die Person weitergeben, die damit interagiert.

Wenn ein interaktives Element - wie eine Schaltfläche, ein Formularelement oder eine benutzerdefinierte Steuerung - keinen zugänglichen Namen hat, hat VoiceOver nichts anzusagen, wenn dieses Element fokussiert ist. Zum Beispiel könnten Sie eine Schaltfläche mit einem Bild eines unterstrichenen Pfeils haben, das anzeigt, dass der Benutzer herunterladen kann. Ohne einen zugänglichen Namen wird VoiceOver nur „Schaltfläche, doppeltippen zum Aktivieren“ ankündigen.

Diese Regel wirkt sich auch auf Personen aus, die Voice Control verwenden. Voice-Control-Benutzer, die versuchen, das Element durch Aussprechen seines sichtbaren Etiketts zu aktivieren, werden feststellen, dass es nicht reagiert.

Aktives Steuername-Problem bestätigen

1. VoiceOver einschalten
2. Das interaktive Element fokussieren
3. Eines der folgenden Dinge wird passieren:
   • Nicht zugänglich: Es wird nur seine Rolle und seinen Wert, falls vorhanden, ankündigen.
   • Zugänglich: Es wird seinen Namen in VoiceOver ankündigen.

Probleme beheben

Um Probleme mit aktiven Steuerungen zu beheben, fügen Sie jedem interaktiven Element ein Zugänglichkeitslabel hinzu, damit VoiceOver einen aussagekräftigen Namen ankündigen kann. Stellen Sie sicher, dass der von Ihnen gewählte Name das sichtbare Etikett des Elements enthält.

Stellen Sie sicher, dass der von Ihnen gewählte Name die Aktion beschreibt, nicht das Aussehen. Ein Symbol einer Lupe sollte mit „Suche“ beschriftet sein, nicht mit „Lupensymbol“.

Wenn sich der Zweck eines Elements basierend auf dem Status ändert (z. B. eine Play/Pause-Taste), aktualisieren Sie den Namen, wann immer sich der Status ändert.

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 Elements aussagekräftig ist oder geben Sie einen accessibilityLabel an, wenn mehr Kontext erforderlich ist.

Anwendungsfall: Schaltfläche mit einem Bild als Etikett

Stellen Sie sicher, dass das Bild einen aussagekräftigen Namen hat. Beachten Sie, dass dies keine Option ist, wenn mehrere Sprachen unterstützt werden. Wenn der Name nicht möglich ist, setzen Sie auf das Bild ein accessibilityLabel.

Alternativ kombinieren Sie ein übergeordnetes Element (z. B. einen generischen Wrapper) und dessen Kinder (z. B. Text und eine Schaltfläche), um ein Element zu erstellen. Wenn kein aussagekräftiger Text verfügbar ist, setzen Sie einen accessibilityLabel auf die gesamte Ansicht, wie unten gezeigt.

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)
        // .accessibilityLabel("Axe DevTools for iOS") <-- Add when `Text` is missing to ensure a name is present
}

React Native

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

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

Wenn Elemente innerhalb eines umgebenden View gruppiert sind, fügen Sie die Eigenschaften accessible und accessibilityLabel 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>

Flutter

Verwenden Sie die tooltip-Eigenschaft auf IconButton, um einen zugänglichen Namen bereitzustellen. Dies setzt den Namen, der von VoiceOver angekündigt wird.

  IconButton(
    icon: const Icon(Icons.search),
    tooltip: 'Search',
    onPressed: () {},
  )

Beim Gruppieren eines sichtbaren Etiketts mit einem interaktiven Element, bündeln Sie diese in MergeSemantics, damit VoiceOver sie in ein einziges fokussierbares Element kombiniert:

  MergeSemantics(
    child: Row(
      children: [
        const Text("Dark mode"),
        Switch(
          value: _darkMode,
          onChanged: (value) => setState(() => _darkMode = value),
        ),
      ],
    ),
  )

Kann ich diese Regel ignorieren?

Diese Regel hat eine kritische Auswirkung für Benutzer und sollte nicht ignoriert werden. Ein unbenanntes interaktives Element ist eines der grundlegendsten Zugänglichkeitsprobleme. VoiceOver und Voice Control Benutzer werden Schwierigkeiten haben, ein Element ohne einen zugänglichen Namen zu nutzen. Ergreifen Sie Maßnahmen, um alle Vorkommen dieses Problems zu beheben, bevor Sie sich mit weniger dringlichen Problemen befassen.

Häufig gestellte Fragen

Wenn ich VoiceOver benutze, höre ich, dass Inhalte vorgelesen werden, nachdem ich das Element fokussiert habe. Warum schlägt diese Regel trotzdem fehl? Wenn ein Element keinen definierten Namen hat, wird der Bildschirmleser oft seinen Wert ansagen. Der Wert ist jedoch kein Ersatz für den fehlenden zugänglichen Namen. Für Bilder in Schaltflächen speziell kann VoiceOver den Dateinamen des Bildes ansagen. Selbst wenn der Dateiname beschreibend ist, ersetzt dies nicht das fehlende zugängliche Name-Attribut.

Ressourcen

Deque University Kursseiten

• Siehe Native Mobile iOS unter 4.1.2a Name, Role, Value (A)

  Hinweis: Voller Zugang zu den Ressourcen der Deque University erfordert ein Abonnement.

Weitere Ressourcen

• Web Content Accessibility Guidelines (WCAG) 2.1
  • Verständnis von SC 4.1.2, Name, Role, Value (Level A)