Unzugängliche Aktion

Was wir überprüfen

Ein interaktives Element sollte von unterstützender Technologie aktiviert werden können. Diese Regel überprüft, ob die Aktion, die mit einem interaktiven Element verbunden ist, fokussierbar und und mit VoiceOver auslösbar ist.

Fehlendes Beispiel ❌

VoiceOver kann focus den 'Benachrichtigungen'-Schalter, aber cannot activate it

VoiceOver gibt "Notifications, on." aus – keine Rolle oder Aktivierungshinweis wird bereitgestellt

Doppeltippen bewirkt nichts; Benutzer haben keine Möglichkeit, die Einstellung umzuschalten

Bestehendes Beispiel ✅

VoiceOver kann focus and activate den 'Benachrichtigungen'-Schalter

VoiceOver gibt "Notifications, switch button, on. Double-tap to activate."

Die Rolle und der Aktivierungshinweis sind vorhanden; Benutzer wissen genau, wie sie mit der Steuerung interagieren können

Auf einen Blick

• Diese Regel hat eine kritische Auswirkung für Benutzer
• Diese Regel kennzeichnet interaktive Elemente, die VoiceOver nicht fokussieren oder aktivieren kann
• Dies geschieht, wenn ein Element selbst nicht fokussierbar ist und sich nicht in einem fokussierbaren übergeordneten Element befindet
• Ein in einem fokussierbaren übergeordneten Element befindliches interaktives Element ist unzugänglich, wenn keine Aktion, kein Gestenerkenner oder kein Aktivierungspunkt erkannt wird

Auswirkungen auf Benutzer

Benutzer von unterstützender Technologie sind am stärksten betroffen. Wenn VoiceOver auf ein interaktives Element fokussieren kann, es jedoch nicht aktivieren kann, können Benutzer möglicherweise keine kritischen Aktionen ausführen – wie das Absenden eines Formulars, das Umschalten einer Einstellung oder das Navigieren zu einem anderen Bildschirm. Dies stellt eine vollständige Barriere für Personen dar, die ausschließlich auf VoiceOver angewiesen sind, um mit der App zu interagieren.

Bestätigen Sie das Problem der unzugänglichen Aktion

1. VoiceOver einschalten
2. Auf das Element fokussieren
3. Eines der folgenden Ereignisse tritt ein:
   • Unzugänglich: Der Benutzer kann das Element mit VoiceOver nicht aktivieren
   • Zugänglich: Der Benutzer kann das Element mit VoiceOver aktivieren

Problembehebung

Es gibt verschiedene Szenarien, die zu einem Problem mit unzugänglicher Aktion führen können. Die Behebung hängt davon ab, wie das Element strukturiert ist. Überprüfen Sie die unten stehenden Ansätze und verwenden Sie denjenigen, der Ihrem Layout entspricht.

UIKit

Es gibt mehrere Ansätze, abhängig davon, wie das Element strukturiert ist.

Problem im Storyboard beheben — sicherstellen, dass das aktive Bedienelement ein Barrierefreiheitselement ist:

1. Wählen Sie das Element mit einem InaccessibleAction-Problem aus.
2. Stellen Sie sicher, dass das Inspektoren-Panel sichtbar ist.
3. Wählen Sie den Identitätsinspektor aus.
4. Unter Barrierefreiheit sicherstellen, dass das Kontrollkästchen „Aktiviert“ für das aktive Bedienelement ausgewählt ist.

Eine alternative Möglichkeit ist, den Barrierefreiheitspfad des Elements zu ändern:

1. Wiederholen Sie die Schritte 1–3 für das aktive Bedienelement, sein Label und das enthaltene Element.
2. Stellen Sie sicher, dass das Kontrollkästchen „Aktiviert“ nur für das aktive Bedienelement und nicht für das Label oder das enthaltene Element ausgewählt ist.
3. Aktualisieren Sie im Code den Barrierefreiheitspfad, um sowohl das Label als auch das aktive Bedienelement einzubeziehen (siehe den Barrierefreiheitspfad im Code unten).

Eine weitere Lösung besteht darin, das aktive Bedienelement innerhalb seines übergeordneten Elements zu zentrieren, sodass VoiceOvers standardmäßiger Aktivierungspunkt es erreichen kann:

1. Wählen Sie das Element mit einem InaccessibleAction-Problem aus.
2. Stellen Sie sicher, dass das Inspektoren-Panel sichtbar ist.
3. Wählen Sie das aktive Bedienelement aus.
4. Wählen Sie den Größeninspektor aus.
5. Stellen Sie sicher, dass das aktive Steuerelement horizontal und vertikal in seinem enthaltenen Element zentriert ist.

Im Code beheben:

Stellen Sie sicher, dass isAccessibilityElement des aktiven Steuerelements auf true gesetzt ist:

buttonContainerView.isAccessibilityElement = true

Fügen Sie einen Tipp-Gesten-Erkenner zur Containerview hinzu:

buttonContainerView.addGestureRecognizer(UITapGestureRecognizer(target: self, selector: #selector(buttonTapped)))

Zentrieren Sie das aktive Steuerelement innerhalb der übergeordneten Ansicht, damit VoiceOver's accessibilityActivationPoint seine Aktion auslöst:

buttonContainerView.button.centerXAnchor.constraint(equalTo: buttonContainerView.centerXAnchor).isActive = true
buttonContainerView.button.centerYAnchor.constraint(equalTo: buttonContainerView.centerYAnchor).isActive = true

Aktualisieren Sie den Zugriffsweg, um sowohl das Label als auch das aktive Steuerelement einzuschließen.

Setzen Sie isAccessibilityElement=false auf das Label und das Elternelement, sodass nur das Steuerelement selbst (in diesem Fall der toggle) ein Barrierefreiheitselement sein sollte.

// 1. Only the toggle should be an accessibility element
toggleContainerView.toggle.isAccessibilityElement = true
toggleContainerView.label.isAccessibilityElement = false
toggleContainerView.isAccessibilityElement = false

// 2. Expand the toggle's accessibilityPath to encompass the full container
// so VoiceOver's focus ring covers both the label and the toggle
let containerFrame = toggleContainerView.superview!.convert(toggleContainerView.frame, to: toggleContainerView.superview)
toggleContainerView.toggle.accessibilityPath = UIBezierPath(rect: containerFrame)

SwiftUI

Dieses Problem tritt bei den meisten Standardelementen und -steuerelementen in SwiftUI nicht auf, kann jedoch bei benutzerdefinierten Steuerelementen oder bei falsch gruppierten Elementen auftreten.

Beim Erstellen von benutzerdefinierten Steuerelementen, die das Verhalten eines Schrittmachers, Schiebereglers oder Schalters nachahmen, verwenden Sie .accessibilityRepresentation, um dem benutzerdefinierten Steuerelement dasselbe Zugriffsverhalten wie dem Standardgegenstück zu geben:

// Add .accessibilityRepresentation on a custom Toggle view
HStack {
    Text("Dark mode is \(getDarkModeStatus().localized)")
    Image(systemName: getDarkModeImage())
}.onTapGesture {
    isOn.toggle()
}
.accessibilityRepresentation {
    Toggle(isOn: $isOn, label: {
        Text("Dark mode is \(getDarkModeStatus().localized)")
    })
}

Beim Gruppieren von Ansichten verwenden Sie .accessibilityElement(children: .combine) oder .accessibilityElement(children: .contain), um sicherzustellen, dass alle Aktionen auf untergeordneten Steuerelementen zugänglich bleiben:

VStack(alignment: .leading) {
    Text("Adjust settings below")
        .accessibilityElement(children: .ignore)
    Divider()
    Toggle(isOn: $isOn) {
        Text("Dark Mode is \(toggleStateText())")
    }
    .accessibility(value: Text("Dark Mode is \(toggleStateText())"))
}
.accessibilityElement(children: .combine)
.accessibilityLabel(Text("Adjust settings below"))

Wenn die Containerview ein anpassbares Steuerelement wie einen Schrittmacher oder Schieberegler hat, verwenden Sie .accessibilityAdjustableAction, um die beste Barrierefreiheitserfahrung zu bieten:

VStack {
    Text("Adjust the stepper below to update dog petting data".localized)
    Divider()
    HStack {
        Stepper(value: $value) {
            Text("Total dogs pet today \($value.wrappedValue)")
        }.accessibilityElement(children: .ignore)
    }
}
.accessibilityElement(children: .combine)
.accessibilityValue(Text("\($value.wrappedValue)"))
.accessibilityAdjustableAction({ direction in
    switch direction {
    case .increment:
        value += 1
    case .decrement:
        value -= 1
    @unknown default:
        print("unknown direction used")
    }
})

React Native

Dieses Problem ist bei standardmäßigen berührbaren oder drückbaren Steuerelementen in React Native selten, kann jedoch bei benutzerdefinierten Steuerelementen auftreten.

Option 1: Erlauben Sie der übergeordneten Ansicht, den Fokus zu handhaben

Setzen Sie die accessible-Eigenschaft der Containerview auf true und accessibilityElementsHidden auf false, und weisen Sie den geeigneten accessibilityRole zu:

<View
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityRole='link'
  accessibilityLabel='Learn more about Deque'
  onTouchStart={openLink}
>
  <Image 
    source={DequeLogo}
    style={{ width: 100, height: 100 }} 
  />
</View>

Option 2: Erlauben Sie dem Element selbst, den Fokus zu handhaben

Setzen Sie accessible, accessibilityElementsHidden und accessibilityRole direkt auf das Steuerelement:

<Image
  source={DequeLogo}
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityRole='link'
  accessibilityLabel='Learn more about Deque'
  onTouchStart={openLink}
  style={{ width: 100, height: 100 }}
/>

Flutter

Flutters Material-Widgets (ElevatedButton, IconButton usw.) machen Tippaktionen automatisch für den Bildschirmleser sichtbar. Beim Erstellen von benutzerdefinierten interaktiven Elementen mit GestureDetector, umhüllen Sie diese in MergeSemantics mit einem Semantics-Widget, um sicherzustellen, dass der Bildschirmleser das Element in einem einzigen Fokus überprüfen und aktivieren kann.

MergeSemantics(
  child: Semantics(
    button: true,
    label: 'Archive item',
    child: GestureDetector(
      onTap: () {},
      child: Container(
        padding: const EdgeInsets.all(12.0),
        color: Colors.green.shade100,
        child: const Text('Archive item'),
      ),
    ),
  ),
)

Kann ich diese Regel ignorieren?

Eine unzugängliche Aktion hat ein Kritische Auswirkungen für Benutzer, und wir empfehlen dringend, diese Probleme zu beheben. Da dies eine experimentelle Regel ist, sollten Sie die Ergebnisse manuell überprüfen. Wenn Sie bestätigt haben, dass das Element von VoiceOver aktiviert werden kann, kann es akzeptabel sein, den Befund zu ignorieren. Erfahren Sie mehr über Regeln ignorieren.

Ressourcen

Deque University Kursseiten

• 2.1.1 Tastatur (A)

Hinweis: Der volle Zugriff auf die Ressourcen der Deque University erfordert ein Abonnement.

Andere Ressourcen

• Richtlinien für die Barrierefreiheit von Webinhalten (WCAG) 2.1, W3C-Empfehlung
  • Erfolgskriterium 2.1.1 - Tastatur
• WCAG 2.1 Erläuterungsdokumente
  • Verständnis 2.1.1 A - Tastatur