Onaanspreekbare Actie

Wat We Controleren

Een interactief element moet door hulpmiddelen voor toegankelijkheid geactiveerd kunnen worden. Deze regel controleert of de actie gekoppeld aan een interactief element kan worden gefocust *en* geactiveerd met VoiceOver.

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. Onder Toegankelijkheid, zorg ervoor dat het selectievakje „Ingeschakeld“ is aangevinkt voor de actieve controle.

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 actieve bedieningselement isAccessibilityElement 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 het actieve bedieningselement binnen de bovenliggende weergave zodat VoiceOver's accessibilityActivationPoint zijn 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 het 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.

Bij het maken van aangepaste bedieningselementen die het gedrag van een stapper, slider 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)")
    })
}

Bij het groeperen van weergaven, gebruik .accessibilityElement(children: .combine) of .accessibilityElement(children: .contain) om ervoor te zorgen dat alle acties op kinderbedieningselementen 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 aanpasbaar bedieningselement heeft zoals een stapper of slider, 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 eigenschap van de omringende weergave in op accessible en true tot accessibilityElementsHidden , en wijs de juiste toe false: accessibilityRoleOptie 2: Laat het element zelf de focus behandelen

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

Stel

, accessible, en accessibilityElementsHiddendirect op het bedieningselement: accessibilityRole Flutter

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

Flutters Material-widgets (

,ElevatedButton, enz.) maken tapacties automatisch zichtbaar voor de schermlezer. Bij het bouwen van aangepaste interactieve elementen met IconButton, omring ze met GestureDetectormet een MergeSemantics widget om ervoor te zorgen dat de schermlezer het element kan ontdekken en activeren in één enkele focusstop. Semantics Kan ik deze regel negeren?

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

Kritische impact 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 regels negeren .Bronnen

Deque University Cursuspagina's

2.1.1 Toetsenbord (A)

• Opmerking: Volledige toegang tot de middelen van Deque University vereist een abonnement.

Note: Full access to Deque University resources requires a subscription.

Andere Bronnen

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