Control activo anidado

Un elemento de accesibilidad no debe tener múltiples controles activos integrados en él. Cada control activo debe ser enfocado individualmente y se debe interactuar con él.

Impacto

Las personas que utilizan TalkBack son las más afectadas. TalkBack no puede activar más de un control activo dentro de otro elemento de accesibilidad.

Confirmación

1. Activar TalkBack
2. Intente enfocar el control
3. Intentar activar el control
4. Ocurrirá uno de los siguientes casos:
   • Inaccesible: Se activa un control diferente.
   • Inaccesible: el control está activado, pero su cuadro de enfoque contiene otro control.
   • Inaccesible: No pasa nada.
   • Accesible: El control está activado y es el único control en su área de enfoque.

Cómo solucionarlo

Evite los elementos anidados en los que se pueda hacer clic. Asegúrese de que cada elemento en el que se pueda hacer clic pueda enfocarse mediante la tecnología de accesibilidad. Las vistas a las que se puede acceder sin tecnología de apoyo deberían estar disponibles para cualquier persona que utilice tecnología de apoyo.

XML

Evite establecer la propiedad importantForAccessibility a no en todas las vistas en las que se puede hacer clic anidadas dentro de un diseño.

Compose

En el siguiente ejemplo, elimine invisibleToUser para garantizar que las vistas estén disponibles para cualquier persona que use tecnología de asistencia. Tenga en cuenta que se puede hacer clic en el elemento principal y esto puede generar un comportamiento no deseado en lugar de interactuar directamente con las vistas "Configuración" o "Información".

Row(modifier = Modifier.clickable { ... }) {
    Text("Settings", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
    Text("Information", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
}

Un ejemplo práctico sería que todas las vistas fueran visibles para la integración con tecnología de asistencia con un padre en el que no se puede hacer clic:

Row {
    Text("Settings", 
        modifier = Modifier.clickable { ... })
    Text("Information", 
        modifier = Modifier.clickable { ... })
}

React Native

Un control que está integrado dentro de otro control no debe ser interactuable ni enfocable. El control principal debe poder enfocarse y hacerse clic en él. Para lograr esto, asegúrese de que el elemento padre sea accesible y tenga una acción de clic. El componente secundario debería tener importantForAccessibility establecido en no-hide-descendants.

<TouchableOpacity
   style={{flexDirection:'row', alignItems: 'center',}}
   onPress={() => props.navigation.navigate('FocusableTextExample')}
   accessible={true}
   accessibilityLabel={"Purchase items in your shopping cart"}>
     <Button title="Buy"
       importantForAccessibility='no-hide-descendants'
       accessibilityElementsHidden='true'
       adjustsFontSizeToFit={true}
       marginBottom={20}
       titleStyle={{
         color: "white",
         fontSize: 20,
        }}
        buttonStyle={{
          height: 50,
          width: 200
        }}
     />
</TouchableOpacity>