A11y Element Focus Box

Waar We Op Controleren

Het toegankelijkheidspad van een element, of VoiceOver-focusbox, moet zijn eigen visuele schermkader volledig omsluiten.

Deze regel handhaaft een Deque Best Practice. U kunt deze regel uitschakelen via het Mobiele Dashboard of door de regel te negeren in tests geschreven voor iOS.

Leer hoe u regels kunt uitschakelen vanuit het Mobiele Dashboard.

In één Oogopslag

• Deze regel heeft een gematigde impact op ziende gebruikers die ook VoiceOver gebruiken
• De VoiceOver-focusbox moet overeenkomen met de visuele schermgrenzen van het element dat hij aankondigt
• Vermijd het gebruik van accessibilityPath of accessibilityFrame indien mogelijk - VoiceOver berekent automatisch het juiste kader
• Als u het kader moet overschrijven, herbereken dan de coördinaten elke keer dat het element beweegt (zoals bij scrollen)

Impact op Gebruikers

Ziende gebruikers die ook VoiceOver gebruiken zijn het meest getroffen. VoiceOver zal de details van een scherm-element aankondigen, maar de focusbox zal gedeeltelijk of volledig buiten het aangekondigde element verschijnen. Deze discrepantie tussen de gesproken inhoud en de zichtbare markering maakt het moeilijk om te volgen wat er wordt gefocust en te begrijpen.

Bevestig A11y Element Focus Box Probleem

1. Schakel VoiceOver in
2. Focus op het element
3. Een van de volgende dingen gebeurt:
   • Ontoegankelijk: de VoiceOver-focusbox zal het element gedeeltelijk bevatten
   • Ontoegankelijk: de VoiceOver-focusbox zal het element helemaal niet bevatten
   • Toegankelijk: de VoiceOver-focusbox zal het element volledig bevatten

Los Problemen op

Problemen die door deze regel worden gevonden, worden bijna altijd veroorzaakt door onjuist gebruik van accessibilityPath of accessibilityFrame. De veiligste aanpak is om ze te verwijderen en VoiceOver het focuskader automatisch te laten berekenen. Als een aangepast kader vereist is, moeten de coördinaten opnieuw worden berekend ten opzichte van het hoofdelement elke keer dat de positie verandert.

UIKit

Onjuist gebruik van de accessibilityPath of accessibilityFrame op een element zal resulteren in een probleem dat door deze regel wordt ontdekt. Los dit op een van de twee manieren op:

• Verwijder accessibilityPath of accessibilityFrame als ze niet nodig zijn. VoiceOver berekent automatisch de coördinaten op het scherm en tekent de juiste focusbox.
• Als u het kader moet overschrijven, converteer het kader van het element dan naar hoofdweergavecoördinaten en wijs het pad opnieuw toe telkens wanneer het element beweegt (zoals in een UIScrollview):

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

Dit type toegankelijkheidsprobleem wordt niet verwacht voor te komen binnen SwiftUI-weergaven.

React Native

Dit type toegankelijkheidsprobleem wordt niet verwacht voor te komen bij standaard Touchable- of Pressable-elementen.

Bij het toevoegen van focus aan een ander type element, stelt u de accessible en accessibilityElementsHidden eigenschappen direct in op dat element:

<Image
   source={DequeLogo}
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel="Deque Systems Logo"
   accessibilityRole="image"
   style={{ width: 100, height: 60 }}
   resizeMode='center'
/>

Wanneer elementen gegroepeerd zijn binnen een omringende View, stelt u de accessible en accessibilityElementsHidden eigenschappen in op de omringende weergave:

<View
  style={styles.rowContainer}
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityLabel="Dark Mode"
  accessibilityValue={{ text: "" + secondSwitchIsEnabled }}
  accessibilityRole="switch"
  onTouchStart={() => {
    setSecondSwitchIsEnabled(!secondSwitchIsEnabled)
  }}>
    <Text style={{ fontSize: 18 }}>Dark Mode</Text>
    <Switch
        style={styles.standardSwitch}
        importantForAccessibility='no-hide-descendants'
        value={secondSwitchIsEnabled}
        onValueChange={() => {
          setSecondSwitchIsEnabled(!secondSwitchIsEnabled);
        }}
    />
</View>

Kan ik deze Regel Negeren?

A11y Element Focus Box heeft een gematigde impact voor gebruikers. Omdat dit een Best Practice-regel is, kan deze worden uitgeschakeld via het mobiele dashboard of onderdrukt in individuele tests. Een verkeerd uitgelijnd focusvakje zorgt echter voor een verwarrende ervaring voor ziende VoiceOver-gebruikers en het is de moeite waard om dit te corrigeren wanneer de oorzaak een verkeerd geconfigureerde accessibilityPath of accessibilityFrame. Lees meer over regels negeren.

Middelen

Deque University Cursuspagina's

• Succescriterium 2.4.7 - Focus Zichtbaar (AA)
• 2.4.7a - Focus Zichtbaar

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

Andere Bronnen

• Richtlijnen voor Toegankelijkheid van Webinhoud (WCAG) 2.1, W3C-aanbeveling
  • Succescriterium 2.4.7 - Focus Zichtbaar
• Apple Developer Documentatie
  • accessibilityFrame
  • accessibilityPath