Onaanspreekbare Actie

Wat We Controleren

Een interactief element moet door hulptechnologie actief kunnen worden gemaakt. Deze regel controleert of de actie die aan een interactief element is gekoppeld, kan worden gefocust tot geactiveerd met VoiceOver.

Foutief Voorbeeld ❌

VoiceOver kan focus de 'Notificaties' schakelaar maar cannot activate it

VoiceOver kondigt aan "Notifications, on." - er wordt geen rol of activatiehint gegeven

Dubbel tikken doet niets; gebruikers kunnen de instelling niet veranderen

Correct Voorbeeld ✅

VoiceOver kan focus and activate de 'Notificaties' schakelaar

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

De rol en activatiehint zijn aanwezig; gebruikers weten precies hoe ze met de bedieningselement moeten omgaan

In Eén Oogopslag

• Deze regel heeft een kritische impact op gebruikers
• Deze regel markeert interactieve elementen waarop VoiceOver niet kan focussen of die het niet kan activeren
• Dit gebeurt wanneer een element zelf niet focusbaar is en zich niet in een focusbare ouder bevindt
• Een interactief element dat zich in een focusbare ouder bevindt, is ontoegankelijk wanneer er geen actie, gebaarherkenner of activatiepunt wordt gedetecteerd

Impact op Gebruikers

Gebruikers van hulpmiddelen voor toegankelijkheid zijn het meest beïnvloed. Wanneer VoiceOver op een interactief element kan focussen maar het niet kan activeren, kunnen gebruikers mogelijk geen kritieke acties voltooien, zoals het indienen van een formulier, het schakelen van een instelling, of het navigeren naar een ander scherm. Dit creëert een volledige barrière voor mensen die uitsluitend op VoiceOver vertrouwen om met de app te communiceren.

Bevestig Onaanspreekbare Actie Probleem

1. Zet VoiceOver aan
2. Focus op het element
3. Eén van de volgende zal gebeuren:
   • Onaanspreekbaar: De gebruiker zal het element niet kunnen activeren met VoiceOver
   • Toegankelijk: De gebruiker zal VoiceOver kunnen gebruiken om het element te activeren

Los Problemen Op

Er zijn verschillende scenario's die kunnen resulteren in een Onaanspreekbare Actie probleem. De oplossing hangt af van hoe het element is gestructureerd. Bekijk de benaderingen hieronder en gebruik degene die overeenkomt met uw layout.

UIKit

Er zijn verschillende benaderingen, afhankelijk van hoe het element is gestructureerd.

Repareer in Storyboard — zorg ervoor dat de actieve controle een toegankelijkheidselement is:

1. Selecteer het element met een InaccessibleAction probleem.
2. Zorg ervoor dat het Inspectorenpaneel zichtbaar is.
3. Selecteer de Identiteitsinspecteur.
4. Zorg ervoor dat onder Toegankelijkheid het selectievakje "Ingeschakeld" is aangevinkt voor het actieve bedieningselement.

Een alternatieve optie is om het toegankelijkheidspad van het element te wijzigen:

1. Herhaal stappen 1–3 voor de actieve controle, zijn label en het bevattende element.
2. Zorg ervoor dat het selectievakje „Ingeschakeld“ alleen is aangevinkt voor de actieve controle, niet voor het label of het bevattende element.
3. Werk in de code het toegankelijkheidspad bij om zowel het label als de actieve controle op te nemen (zie de toegankelijkheidspadcorrectie in de code hieronder).

Een andere oplossing is om de actieve controle te centreren binnen zijn ouder zodat het standaard activeringspunt van VoiceOver het kan bereiken:

1. Selecteer het element met een InaccessibleAction probleem.
2. Zorg ervoor dat het Inspectorenpaneel zichtbaar is.
3. Selecteer de actieve controle.
4. Selecteer de Formaatinspecteur.
5. Zorg ervoor dat de actieve controle horizontaal en verticaal gecentreerd is binnen het bevattende element.

Repareer in code:

Zorg ervoor dat de isAccessibilityElement van de actieve bedieningselement is ingesteld op true:

buttonContainerView.isAccessibilityElement = true

Voeg een tikgebaar-herkenner toe aan de omringende weergave:

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

Centreer de actieve bedieningselement binnen de bovenliggende weergave zodat VoiceOver's accessibilityActivationPoint de actie zal activeren:

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

Werk het toegankelijkheidspad bij om zowel het label als het actieve bedieningselement op te nemen.

Stel isAccessibilityElement=false in op het label en het bovenliggende element, zodat alleen de bedieningselement zelf (de toggle, in dit geval) een toegankelijkheidselement is.

// 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

Dit probleem zal niet voorkomen bij de meeste standaard elementen en bedieningselementen in SwiftUI, maar kan optreden bij aangepaste bedieningselementen of wanneer elementen onjuist gegroepeerd zijn.

Wanneer je aangepaste bedieningselementen bouwt die het gedrag van een stepper, schuifregelaar of schakelaar nabootsen, gebruik .accessibilityRepresentation om het aangepaste bedieningselement hetzelfde toegankelijkheidsgedrag te geven als zijn standaard tegenhanger:

// 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)")
    })
}

Wanneer je weergaven groepeert, gebruik .accessibilityElement(children: .combine) of .accessibilityElement(children: .contain) om ervoor te zorgen dat alle acties op kindbedieningselementen toegankelijk blijven:

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"))

Als de omringende weergave een aanpasbare bedieningselement zoals een stepper of schuifregelaar heeft, gebruik .accessibilityAdjustableAction om de beste toegankelijkheidservaring te bieden:

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

Dit probleem komt weinig voor bij standaard aanraakbare of drukbare bedieningselementen in React Native, maar kan optreden bij aangepaste bedieningselementen.

Optie 1: Laat de bovenliggende weergave de focus behandelen

Stel de accessible-eigenschap van de omringende weergave in op true en accessibilityElementsHidden op false en wijs de juiste accessibilityRole toe:

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

Stel

Stel accessible, accessibilityElementsHidden en accessibilityRole direct in op de bedieningselement:

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

Flutters Material-widgets (

Flutter's Materiaal-widgets (ElevatedButton, IconButton, etc.) maken tikacties automatisch toegankelijk voor de schermlezer. Wanneer je aangepaste interactieve elementen bouwt met GestureDetector, omring ze dan met MergeSemantics met een Semantics widget om ervoor te zorgen dat de schermlezer het element kan ontdekken en activeren in één focusstap.

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'),
      ),
    ),
  ),
)

Toegankelijkheidsactie heeft een

Onaangankelijke Actie heeft een voor gebruikers, en we raden sterk aan deze problemen op te lossen. Omdat dit een experimentele regel is, moet je de resultaten handmatig verifiëren. Als je hebt bevestigd dat het element kan worden geactiveerd door VoiceOver, kan het acceptabel zijn om de bevinding te negeren. Leer meer over voor gebruikers en we raden sterk aan om deze problemen op te lossen. Omdat dit een experimentele regel is, moet je de resultaten handmatig verifiëren. Als je hebt bevestigd dat het element door VoiceOver kan worden geactiveerd, kan het acceptabel zijn om de bevinding te negeren. Lees meer over ..

Deque University Cursuspagina's

2.1.1 Toetsenbord (A)

• 2.1.1 Toetsenbord (A)

Opmerking: Volledige toegang tot Deque University-bronnen vereist een abonnement.

Andere Bronnen

• Richtlijnen voor Toegankelijkheid van Webinhoud (WCAG) 2.1, W3C Aanbeveling
  • Succescriterium 2.1.1 - Toetsenbord
• WCAG 2.1 Begrijpingsdocumenten
  • Inzicht in 2.1.1 A - Toetsenbord