Caja de enfoque del elemento de accesibilidad

Asegura que la ruta de accesibilidad de una vista, o el cuadro de enfoque de VoiceOver, encapsule su propio marco visual en pantalla.

Esta regla aplica una práctica recomendada de Deque. Puede desactivar esta regla desde el Panel móvil o ignorando la regla en las pruebas escritas para iOS.

Aprenda cómo desactivar las reglas desde el Panel móvil.

Impacto

Las personas que utilizan VoiceOver y pueden ver son las más afectadas. VoiceOver anunciará los detalles de un elemento en pantalla, pero el foco aparecerá parcial o totalmente fuera del elemento que se está anunciando.

Confirmación

1. Activar VoiceOver
2. Enfocar el elemento
3. Ocurrirá uno de los siguientes casos:

• Inaccesibilidad: el cuadro de enfoque de VoiceOver contendrá parcialmente el elemento.
• Inaccesibilidad: el cuadro de enfoque de VoiceOver no contendrá el elemento en absoluto.
• Accesible: el cuadro de enfoque de VoiceOver contendrá completamente el elemento.

Cómo solucionarlo

UIKit

El uso incorrecto de accessibilityPath o accessibilityFrame en una vista provocará que esta regla encuentre un problema. Corrígalo de una de dos maneras:

• No utilice accessibilityPath o accessibilityFrame. VoiceOver calcula automáticamente las coordenadas de la vista en pantalla y debería dibujar correctamente un borde (el cuadro de enfoque de VoiceOver) alrededor del elemento actualmente enfocado. Al utilizar cualquiera de estas API de accesibilidad en un elemento, se volverá a dibujar el cuadro de enfoque de VoiceOver para ese elemento.
• Si debe volver a dibujar el cuadro de enfoque de VoiceOver, asegúrese de calcular correctamente las coordenadas en pantalla del elemento y de recalcular y redefinir el cuadro de enfoque cada vez que el elemento se mueva (como en un 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

No se espera que este tipo de problema de accesibilidad ocurra en las vistas de SwiftUI.

React Native

No se espera que este tipo de problema de accesibilidad ocurra con elementos táctiles o presionables predeterminados.

Al agregar foco a otro tipo de elemento, agregue la propiedad accessible y la propiedad accessibilityElementsHidden al elemento directamente:

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

Cuando los elementos se agrupan dentro de una vista contenedora, agregue la propiedad accessible y la propiedad accessibilityElementsHidden a la vista contenedora:

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