Nicht zugängliche Aktion

Eine interaktive Ansicht sollte mithilfe assistiven Technologie aktiviert werden können.

Auswirkung

Benutzer assistiven Technologien sollten in der Lage sein, die Aktion eines aktiven Steuerelements mithilfe assistiven Technologien zu aktivieren.

Bestätigung

1. VoiceOver aktivieren
2. Konzentrieren Sie sich auf das Element
3. Eines der folgenden Ereignisse wird eintreten:
   • Nicht zugänglich: Der Benutzer kann die Aktion des aktiven Steuerelements nicht mithilfe der assistiven Technologie aktivieren.
   • Zugänglich: Der Benutzer kann assistiven Technologien verwenden, um das aktives Steuerelement zu aktivieren.

So beheben Sie das Problem

Diese Regel findet ein Problem, wenn:

• Ein Steuerelement und seine Bezeichnung befinden sich in einer übergeordneten Ansicht, die als isAccessibilityElement = true gekennzeichnet ist.
• die übergeordnete Ansicht verfügt nicht über einen separaten Gestenerkenner

und/oder:

• das Steuerelement ist nicht im Fokus der übergeordneten Ansicht und kann daher nicht mit VoiceOver aktiviert werden

UIKit

Im Storyboard:

1. Wählen Sie das Element mit InaccessibleAction Problem aus
2. Stellen Sie sicher, dass das Inspektorenfenster sichtbar ist
3. Wählen Sie den Identitätsinspektor
4. Unter „Barrierefreiheit“ gibt es eine Eigenschaft namens „Barrierefreiheit“ und daneben ein Kontrollkästchen namens „Aktiviert“. Stellen Sie sicher, dass das Kontrollkästchen "Aktiviert" für das aktives Steuerelement ausgewählt ist.

Alternativ können Sie auch den Zugänglichkeitspfad des Elements ändern:

1. Wiederholen Sie die Schritte 1 bis 3 für das aktive Steuerelement, seine Beschriftung und die Ansicht, die das aktive Steuerelement enthält.
2. Unter „Barrierefreiheit“ gibt es eine Eigenschaft namens „Barrierefreiheit“ und daneben ein Kontrollkästchen namens „Aktiviert“. Stellen Sie sicher, dass die Checkbox "Aktiviert" für das aktive Steuerelement aktiviert ist, jedoch nicht für das Etikett oder die darin enthaltene Ansicht.
3. Ändern Sie im Code den Zugänglichkeitspfad, um das aktive Steuerelement und die Beschriftung der enthaltenen Ansicht einzuschließen, wie im zweiten Schritt des vierten Elements im Abschnitt „Im Code“ gezeigt.

Eine andere Lösung besteht darin, dass das aktive Steuerelement den Aktivierungspunkt für die Zugänglichkeit des übergeordneten Elements verwendet:

1. Wählen Sie das Element mit InaccessibleAction Problem aus
2. Stellen Sie sicher, dass das Inspektorenfenster sichtbar ist
3. Wählen Sie das aktive Steuerelement im Element
4. Wählen Sie den Größeninspektor
5. Stellen Sie sicher, dass das aktive Steuerelement horizontal und vertikal innerhalb der darin enthaltenen Ansicht zentriert ist.

Im Code:

Suchen Sie, wo die Eigenschaft isAccessibilityElement des aktiven Steuerelements festgelegt wurde, und stellen Sie sicher, dass sie auf „true“ festgelegt ist.

buttonContainerView.isAccessibilityElement = true

Eine weitere Möglichkeit besteht darin, der Ansicht, die das aktive Steuerelement enthält, einen Gestenerkenner hinzuzufügen. Suchen Sie die Ansicht, die das Steuerelement enthält, und fügen Sie einen Erkenner für Tippgesten hinzu.

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

Alternativ können Sie das aktive Steuerelement so ändern, dass es sich in der Mitte der übergeordneten Ansicht befindet, sodass der accessibilityActivationPoint der enthaltenden Ansicht das aktive Steuerelement aktiviert. Suchen Sie die Ansicht, die das Steuerelement enthält, und stellen Sie sicher, dass sich das Steuerelement genau in der Mitte der übergeordneten Ansicht befindet, in der es enthalten ist.

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

Darüber hinaus können Sie dieses Problem beheben, indem Sie den Zugriffspfad so ändern, dass das aktive Steuerelement und die Beschriftung der enthaltenen Ansicht eingeschlossen werden.

1. Legen Sie für die Beschriftung des Steuerelements und die übergeordnete Ansicht Folgendes fest: isAccessibilityElement = false

toggleContainerView.toggle.isAccessibilityElement = true
toggleContainerView.label.isAccessibilityElement = false
toggleContainerView.isAccessibilityElement = false

1. Aktualisieren Sie den Zugänglichkeitspfad der Steuerung, um sowohl das Label als auch die Steuerung einzukapseln.

    // Assuming we are in a ViewController
let button = UIButton()

// If not within a ViewController, self.view should be replaced with the rootView of the screen
let rootview = self.view
let onScreenFrame = button.superview!.convert(button.frame, to: rootview)
button.accessibilityPath = UIBezierPath(rect: onScreenFrame)

SwiftUI

Dieses Zugänglichkeitsproblem kann bei den meisten Standardelementen und aktive Steuerelemente in SwiftUI nicht auftreten. Bei einigen benutzerdefinierten aktive Steuerelemente, wie z. B. einem benutzerdefinierten Slider, Stepper oder Toggle, oder wenn Ansichten falsch gruppiert sind, kann das Problem jedoch auftreten.

Wenn Sie benutzerdefinierte aktive Steuerelemente wie einen Stepper, Slider oder Toggle verwenden, sollten Sie den Ansichtsmodifikator .accessibilityRepresentation verwenden, damit benutzerdefinierte Steuerelemente dieselbe Barrierefreiheitsdarstellung haben wie die entsprechende Standardversion des Steuerelements.

// In this scenario, add an .accessibilityRepresentation view modifier on a completely custom Toggle view

// Custom toggle element
        HStack {
            Text("Dark mode is \(getDarkModeStatus().localized)")
            Image(systemName: getDarkModeImage())
        }.onTapGesture {
            isOn.toggle()
        } // apply the .accessibilityRepresentation modifier to the custom toggle
        .accessibilityRepresentation {
            Toggle(isOn: $isOn, label: {
                Text("Dark mode is \(getDarkModeStatus().localized)")
            })
        }

Beim Gruppieren von Ansichten können Sie verschiedene Ansätze verfolgen, um sicherzustellen, dass keine Probleme mit unzugänglichen Aktionen auftreten, und um dem Benutzer die beste Zugänglichkeit zu bieten.

Wenn Ansichten gruppiert werden, verwenden Sie den Modifikator .accessibilityElement(.combine) oder .accessibilityElement(.contain) für die enthaltene Ansicht, um sicherzustellen, dass alle mit einem untergeordneten Steuerelement verknüpften Aktionen für eine unterstützende Technologie verfügbar sind.

VStack(alignment: .leading) {
            Text("Adjust settings below")
                .accessibilityElement(children: .ignore) // We ignore this text and instead apply an accessibility label with the same content to the containing view
            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 enthaltene Ansicht über ein anpassbares Steuerelement wie einen Schritt- oder Schieberegler verfügt, sollten Sie den Modifikator .accessibilityAdjustableAction verwenden, um dem Benutzer die bestmögliche Zugänglichkeit zu bieten. Wenn Sie den Modifikator .accessibilityElement(.ignore) für ein Steuerelement innerhalb der enthaltenen Ansicht verwenden, achten Sie außerdem darauf, der enthaltenen Ansicht eine Barrierefreiheitsaktion mit derselben Funktionalität wie dem ignorierten Steuerelement bereitzustellen.

        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 Zugänglichkeitsproblem kann bei den meisten berührbaren oder drückbaren Steuerelementen in React Native nicht auftreten. Bei einigen benutzerdefinierten aktiven Steuerelementen kann dieses Problem jedoch auftreten.

Option 1: Erlauben Sie der übergeordneten Ansicht, den Fokus zu steuern Setzen Sie die accessible Eigenschaft der enthaltenen Ansicht auf „true“ und deren accessibilityElementsHidden Eigenschaft auf „false“. Weisen Sie das Entsprechende accessibilityRole zu, um das erwartete Verhalten zu erreichen. Diese Eigenschaften ermöglichen die Aktivierung der benutzerdefinierten Steuerung durch assistive Technologie.

<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: Element den Fokus steuern lassen Setzen Sie im Steuerelement die Eigenschaft accessible auf „true“, die Eigenschaft accessibilityElementsHidden auf „false“ und weisen Sie die entsprechende Eigenschaft accessibilityRole zu, um das erwartete Verhalten zu erzielen. Diese Eigenschaften ermöglichen die Aktivierung der benutzerdefinierten Steuerung durch assistive Technologie.

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