Nombre del Interruptor

Qué Verificamos

Cualquier elemento Switch debe tener un nombre accesible que describa su propósito para tecnologías de asistencia como TalkBack y Voice Access.

Ejemplo Fallido ❌

El interruptor no tiene un nombre accesible.

TalkBack lee "Off, Switch."

Voice Access — el usuario no tiene una etiqueta visible para mencionar al activar el interruptor.

Ejemplo Aprobado ✅

El interruptor está etiquetado con texto visible vía labelFor o agrupación.

TalkBack lee "Dark Mode, Off, Switch."

Voice Access — el usuario dice "Modo Oscuro" para activar el interruptor.

De un Vistazo

• Esta regla tiene un impacto crítico para los usuarios
• Cada interruptor necesita un nombre accesible que describa lo que controla
• Un nombre como "Modo Oscuro" es mucho más útil que no tener nombre
• El nombre debe provenir de una etiqueta visible cuando sea posible, usando labelFor o técnicas de agrupación
• Evita establecer una descripción de contenido directamente en el Interruptor a menos que se preserve el estado (por ejemplo, 'encendido'/'apagado')

Impacto para los Usuarios

Las personas ciegas, con baja visión o que utilizan acceso mediante interruptor dependen del nombre accesible para entender lo que hace un interruptor antes de interactuar con él. Sin un nombre, TalkBack solo anuncia 'encendido' o 'apagado', sin ofrecer a los usuarios contexto sobre lo que están controlando.

Confirmar Problema de Nombre de Interruptor

1. Activa TalkBack
2. Intenta enfocarte en un elemento Switch
3. Ocurrirá una de las siguientes:
   • Inaccesible: TalkBack solo anuncia 'encendido' o 'apagado'.
   • Accesible: TalkBack anuncia el nombre del interruptor y 'encendido' o 'apagado'.

Corregir Problemas

Un interruptor necesita un nombre accesible para que la tecnología de asistencia pueda anunciar lo que controla el interruptor. La mejor aproximación es agrupar o enlazar la etiqueta y el interruptor para que sean tratados como un único elemento accesible.

XML

Puedes proporcionar una etiqueta en el elemento adyacente o envolver el interruptor con su etiqueta. También puedes manipular el contentDescription, pero asegúrate de retener el estado 'encendido' y 'apagado' para los anuncios de TalkBack.

layouts/activity.xml
<TextView
     android:id="@+id/label"
     android:text="@string/label_text"
     android:labelFor="@+id/switch">
<Switch
     android:id="@+id/switch"/>

...

strings.values/
<string name="label_text">Dark Mode</string>

Compose

Agrupa un Text y Switch en un diseño combinado como una Fila. Aplica el rol de interruptor y el modificador de alternancia al Text, y borra la semántica en el Switch usando Modifier.clearAndSetSemantics { }. De esta manera, TalkBack se enfocará en la etiqueta, en lugar de en el elemento del interruptor directamente.

val (isSwitchChecked, setSwitchState) = remember { 
    mutableStateOf(true) 
}

Row(modifier = Modifier.semantics(mergeDescendants = true) { }) {
    Text(
        text = "Get Emails",
        modifier = Modifier
            .toggleable(
                value = isSwitchChecked,
                onValueChange = { 
                    setSwitchState(!isSwitchChecked) 
                },
                role = Role.Switch
            )
    )

    Switch(
        checked = isSwitchChecked,
        onCheckedChange = { 
            setSwitchState(!isSwitchChecked) 
        },
        modifier = Modifier
            .clearAndSetSemantics { }
    )
}

React Native

Para combinar un interruptor y una etiqueta en React Native, envuelve ambos componentes dentro de un componente TouchableOpacity:

<TouchableOpacity
   onPress={() => {
     setSwitchOn(!switchOn)
     Alert.alert("Switch on : " + !switchOn)}}
   style={styles.subContainer}
   accessible={true}
   accessibilityLabel={"Subscribe"}
   accessibilityRole='switch'>
      <Text style={{ fontSize: 22 }}>
         Subscribe
      </Text>
      <Switch
         importantForAccessibility='no-hide-descendants'
         onValueChange={() => {
            setSwitchOn(!switchOn)
            Alert.alert("Switch on : " + !switchOn)} }
        value={switchOn}
   />
</TouchableOpacity>

Para asegurarte de que esto funcione correctamente para todos los usuarios:

• Configura accessible={true} en el TouchableOpacity para que el grupo se enfoque junto
• Asegúrate de que la propiedad accessibilityLabel del TouchableOpacity coincida exactamente con la etiqueta de texto visible
• Configura el accessibilityRole a switch para comunicar el tipo de control correcto
• Configura importantForAccessibility='no-hide-descendants' en el elemento Switch para que no pueda ser enfocado individualmente
• Añade una acción onPress para manejar el comportamiento del interruptor cuando se activa

¿Puedo Ignorar Esta Regla?

Nombre del Interruptor tiene un impacto crítico para los usuarios. Un interruptor sin un nombre accesible no puede ser entendido ni usado por usuarios de lectores de pantalla. Recomendamos encarecidamente corregir este problema en todos los casos. Aprende más sobre ignorando reglas.

Recursos

Páginas de Curso de Deque University

• Consulta Android Nativo Móvil bajo 4.1.2 Nombre, Rol, Valor (A)

Nota: El acceso completo a los recursos de Deque University requiere una suscripción.

Otros recursos

• Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0, Recomendación del W3C - Criterio de Éxito 4.1.2 - Nombre, Función, Valor
• Documentos de Comprensión de WCAG 2.1 - Comprensión 4.1.2 A - Nombre, Función, Valor