Etiqueta en el nombre

Una vista enfocable en accesibilidad debe garantizar que su nombre incluya su etiqueta visible.

Impacto

Los usuarios de VoiceOver deben tener acceso a la misma información visible en la pantalla. Cada vez que se actualice el texto de un control, actualice la etiqueta de accesibilidad para contener el nuevo texto.

Confirmación

1. Activar VoiceOver
2. Enfócate en el elemento
3. Ocurrirá uno de los siguientes casos:
   • Inaccesible: VoiceOver anunciará texto que no contenga el texto visible del control activo.
   • Accesible: VoiceOver anunciará el texto que contiene el texto visible del control activo.
   • Accesible: VoiceOver anunciará el texto visible del control activo.

Cómo solucionarlo

Un problema detectado por esta regla se debe a que parte o todo el texto visible falta en la etiqueta de accesibilidad del control.

UIKit

En el guión gráfico:

1. Seleccione el elemento con LabelInName un problema
2. Asegúrese de que el Panel de inspectores esté visible
3. Seleccione el Inspector de identidad
4. Dentro de Accesibilidad, hay una categoría llamada “Etiqueta”. Introduzca una etiqueta que coincida exactamente o contenga todo el texto visible.

En código:

Encuentre dónde se configuró la etiqueta de accesibilidad y asegúrese de que el valor de la etiqueta de accesibilidad coincida o contenga todo el texto visible del componente.

button.title = "Login"
button.accessibilityLabel = "Submit login"

SwiftUI

Establezca una etiqueta de accesibilidad que coincida o contenga el texto visible del componente.

Button(action: {
    openMenu()
}) {
    Text("Menu")
}.accessibility(label: Text("Main Menu"))

React Native

La propiedad accessibilityLabel debe coincidir o contener el texto visible del componente.

De forma predeterminada, un botón utilizará su título como su accessibilityLabel y, por lo tanto, pasará esta regla.

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>

Para los elementos interactivos sin título, utilice una vista táctil que contenga los componentes de control y texto. De esta manera, el componente de texto se convierte en la etiqueta visible para el control. Establezca el elemento contenedor accessibilityLabel para que coincida o contenga el texto visible.

<TouchableOpacity
   style={styles.switchRow}
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel='Dark Mode'
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
     setIsEnabled(!isEnabled)
   }}> 
     <Text style={{ fontSize: 22 }}> 
        Subscribe
     </Text>
     <Switch
        trackColor={{ false: 'lightgray', true: 'dimgray' }}
        ios_backgroundColor={'lightgray'}
        thumbColor={'white'}
        accessibilityElementsHidden={true}
        importantForAccessibility='no-hide-descendants'
        value={isEnabled}

         onValueChange={() => {
           setIsEnabled(!isEnabled);
         }}
     />
</TouchableOpacity>