Accesibilidad

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Tanto Android como iOS proporcionan APIs para integrar aplicaciones con tecnologías asistivas como los lectores de pantalla incorporados VoiceOver (iOS) y TalkBack (Android). React Native ofrece APIs complementarias que permiten que tu aplicación atienda a todos los usuarios.

información

Android e iOS difieren ligeramente en sus enfoques, por lo que las implementaciones de React Native pueden variar según la plataforma.

Propiedades de accesibilidad

accessible

Cuando es true, indica que la vista es detectable por tecnologías asistivas como lectores de pantalla y teclados físicos. Ten en cuenta que esto no garantiza que la vista sea enfocada por VoiceOver o TalkBack. Existen varias razones para esto, como que VoiceOver no permita elementos de accesibilidad anidados, o que TalkBack prefiera enfocar algún elemento padre.

Por defecto, todos los elementos táctiles son accesibles.

En Android, accessible se traduce a focusable nativo. En iOS, se traduce a isAccessibilityElement nativo.

tsx

<View>
  <View accessible={true} />
  <View />
</View>

En el ejemplo anterior, el foco de accesibilidad solo está disponible en la primera vista secundaria con la propiedad accessible, no en el elemento padre ni en el hermano sin accessible.

accessibilityLabel

Cuando una vista está marcada como accesible, es buena práctica establecer un accessibilityLabel para que usuarios de VoiceOver o TalkBack sepan qué elemento han seleccionado. El lector de pantalla verbalizará esta cadena cuando se seleccione el elemento asociado.

Para usarlo, asigna la propiedad accessibilityLabel a una cadena personalizada en tu View, Text o Touchable:

tsx

<TouchableOpacity
  accessible={true}
  accessibilityLabel="Tap me!"
  onPress={onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Press me!</Text>
  </View>
</TouchableOpacity>

En el ejemplo anterior, el accessibilityLabel en el elemento TouchableOpacity sería por defecto "Press me!". La etiqueta se construye concatenando todos los nodos Text hijos separados por espacios.

accessibilityLabelledBy

Android

Referencia a otro elemento nativeID usado para construir formularios complejos. El valor de accessibilityLabelledBy debe coincidir con el nativeID del elemento relacionado:

tsx

<View>
  <Text nativeID="formLabel">Label for Input Field</Text>
  <TextInput
    accessibilityLabel="input"
    accessibilityLabelledBy="formLabel"
  />
</View>

En este ejemplo, el lector de pantalla anuncia Input, Edit Box for Label for Input Field al enfocar el TextInput.

accessibilityHint

Una pista de accesibilidad proporciona contexto adicional sobre el resultado de una acción cuando no queda claro solo con la etiqueta de accesibilidad.

Asigna a la propiedad accessibilityHint una cadena personalizada en tu View, Text o Touchable:

tsx

<TouchableOpacity
  accessible={true}
  accessibilityLabel="Go back"
  accessibilityHint="Navigates to the previous screen"
  onPress={onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Back</Text>
  </View>
</TouchableOpacity>

iOS

En este ejemplo, VoiceOver leerá la pista después de la etiqueta si el usuario tiene activadas las sugerencias en la configuración de VoiceOver. Más guías sobre accessibilityHint en la documentación de iOS.

Android

En este ejemplo, TalkBack leerá la pista después de la etiqueta. Actualmente no es posible desactivar las pistas en Android.

accessibilityLanguage

iOS

Al usar la propiedad accessibilityLanguage, el lector de pantalla entenderá qué idioma usar al leer la etiqueta, valor y pista del elemento. El valor de cadena proporcionado debe seguir la especificación BCP 47.

tsx

<View
  accessible={true}
  accessibilityLabel="Pizza"
  accessibilityLanguage="it-IT">
  <Text>🍕</Text>
</View>

accessibilityIgnoresInvertColors

iOS

La inversión de colores de pantalla es una función de accesibilidad disponible en iOS e iPadOS para personas con daltonismo, baja visión o discapacidad visual. Si hay una vista que no deseas invertir cuando esta configuración está activa (por ejemplo, una foto), establece esta propiedad en true.

accessibilityLiveRegion

Android

Cuando los componentes cambian dinámicamente, queremos que TalkBack alerte al usuario final. Esto se logra con la propiedad accessibilityLiveRegion, que puede configurarse como none, polite o assertive:

• none Los servicios de accesibilidad no deben anunciar cambios en esta vista.

• polite Los servicios de accesibilidad deben anunciar cambios en esta vista.

• assertive Los servicios de accesibilidad deben interrumpir el habla en curso para anunciar inmediatamente los cambios en esta vista.

tsx

<TouchableWithoutFeedback onPress={addOne}>
  <View style={styles.embedded}>
    <Text>Click me</Text>
  </View>
</TouchableWithoutFeedback>
<Text accessibilityLiveRegion="polite">
  Clicked {count} times
</Text>

En el método de ejemplo anterior addOne cambia la variable de estado count. Cuando se activa TouchableWithoutFeedback, TalkBack lee el texto en la vista Text debido a su propiedad accessibilityLiveRegion="polite".

accessibilityRole

accessibilityRole comunica el propósito de un componente a los usuarios de tecnologías asistivas.

accessibilityRole puede ser uno de los siguientes:

• adjustable Se usa cuando un elemento puede "ajustarse" (ej. un control deslizante).

• alert Se usa cuando un elemento contiene texto importante que debe presentarse al usuario.

• button Se usa cuando el elemento debe tratarse como un botón.

• checkbox Se usa cuando un elemento representa una casilla de verificación que puede estar marcada, desmarcada o en estado mixto.

• combobox Se usa cuando un elemento representa un cuadro combinado que permite seleccionar entre varias opciones.

• header Se usa cuando un elemento actúa como encabezado de una sección de contenido (ej. título de una barra de navegación).

• image Se usa cuando el elemento debe tratarse como una imagen. Puede combinarse con botón o enlace.

• imagebutton Se usa cuando el elemento debe tratarse como botón y además es una imagen.

• keyboardkey Se usa cuando el elemento actúa como tecla de teclado.

• link Se usa cuando el elemento debe tratarse como un enlace.

• menu Se usa cuando el componente es un menú de opciones.

• menubar Se usa cuando un componente es un contenedor de múltiples menús.

• menuitem Se usa para representar un elemento dentro de un menú.

• none Se usa cuando el elemento no tiene ningún rol.

• progressbar Se usa para representar un componente que indica el progreso de una tarea.

• radio Se usa para representar un botón de opción.

• radiogroup Se usa para representar un grupo de botones de opción.

• scrollbar Se usa para representar una barra de desplazamiento.

• search Se usa cuando un campo de texto también debe tratarse como campo de búsqueda.

• spinbutton Se usa para representar un botón que abre una lista de opciones.

• summary Se usa cuando un elemento puede proporcionar un resumen rápido de las condiciones actuales en la app al iniciarse.

• switch Se usa para representar un interruptor que puede activarse/desactivarse.

• tab Se usa para representar una pestaña.

• tablist Se utiliza para representar una lista de pestañas.

• text Se usa cuando el elemento debe tratarse como texto estático inmodificable.

• timer Se utiliza para representar un temporizador.

• togglebutton Se usa para representar un botón de alternancia. Debe usarse con accessibilityState checked para indicar su estado.

• toolbar Se utiliza para representar una barra de herramientas (un contenedor de botones de acción o componentes).

• grid Se usa con ScrollView, VirtualizedList, FlatList o SectionList para representar una cuadrícula. Añade anuncios de entrada/salida de cuadrícula a GridView de Android.

accessibilityShowsLargeContentViewer

iOS

Valor booleano que determina si se muestra el visor de contenido grande al mantener pulsado el elemento.

Disponible en iOS 13.0 y versiones posteriores.

accessibilityLargeContentTitle

iOS

Cadena que se utilizará como título del visor de contenido grande cuando se muestre.

Requiere que accessibilityShowsLargeContentViewer esté establecido en true.

tsx

<View
  accessibilityShowsLargeContentViewer={true}
  accessibilityLargeContentTitle="Home Tab">
  <Text>Home</Text>
</View>

accessibilityState

Describe el estado actual de un componente para usuarios de tecnologías asistivas.

accessibilityState es un objeto que contiene los siguientes campos:

Name	Description	Type	Required
disabled	Indicates whether the element is disabled or not.	boolean	No
selected	Indicates whether a selectable element is currently selected or not.	boolean	No
checked	Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.	boolean or 'mixed'	No
busy	Indicates whether an element is currently busy or not.	boolean	No
expanded	Indicates whether an expandable element is currently expanded or collapsed.	boolean	No

Para usarlo, asigna a accessibilityState un objeto con una definición específica.

accessibilityValue

Representa el valor actual de un componente. Puede ser una descripción textual del valor o, para componentes basados en rangos (como controles deslizantes y barras de progreso), contiene información de rango (mínimo, actual y máximo).

accessibilityValue es un objeto que contiene los siguientes campos:

Name	Description	Type	Required
min	The minimum value of this component's range.	integer	Required if now is set.
max	The maximum value of this component's range.	integer	Required if now is set.
now	The current value of this component's range.	integer	No
text	A textual description of this component's value. Will override min, now, and max if set.	string	No

accessibilityViewIsModal

iOS

Valor booleano que indica si VoiceOver debe ignorar los elementos dentro de vistas que son hermanas del receptor.

Por ejemplo, en una ventana que contiene las vistas hermanas A y B, establecer accessibilityViewIsModal en true en la vista B hace que VoiceOver ignore los elementos en la vista A. Si la vista B contiene una vista hija C y estableces accessibilityViewIsModal en true en C, VoiceOver no ignora los elementos en A.

accessibilityElementsHidden

iOS

Valor booleano que indica si el elemento de accesibilidad dado, y cualquier elemento que contenga, están ocultos.

Por ejemplo, en una ventana con vistas hermanas A y B, establecer accessibilityElementsHidden en true en la vista B hace que VoiceOver ignore la vista B y sus elementos hijos. Equivale a la propiedad Android importantForAccessibility="no-hide-descendants".

aria-valuemax

Representa el valor máximo para componentes basados en rangos, como controles deslizantes y barras de progreso.

aria-valuemin

Representa el valor mínimo para componentes basados en rangos, como controles deslizantes y barras de progreso.

aria-valuenow

Representa el valor actual para componentes basados en rangos, como controles deslizantes y barras de progreso.

aria-valuetext

Representa la descripción textual del componente.

aria-busy

Indica que un elemento está siendo modificado y que las tecnologías asistivas pueden esperar a que finalicen los cambios antes de informar al usuario.

Type	Default
boolean	false

aria-checked

Indica el estado de un elemento seleccionable. Puede ser booleano o el string "mixed" para casillas mixtas.

Type	Default
boolean, 'mixed'	false

aria-disabled

Indica que el elemento es perceptible pero deshabilitado, por lo que no es editable ni operable.

Type	Default
boolean	false

aria-expanded

Indica si un elemento expandible está actualmente expandido o colapsado.

Type	Default
boolean	false

aria-hidden

Indica si el elemento está oculto para las tecnologías asistivas.

Por ejemplo, en una ventana con vistas hermanas A y B, establecer aria-hidden en true en la vista B hace que VoiceOver ignore el elemento B y sus hijos.

Type	Default
boolean	false

aria-label

Define un valor de cadena que etiqueta un elemento interactivo.

Type
string

aria-labelledby

Android

Identifica el elemento que etiqueta al elemento donde se aplica. El valor de aria-labelledby debe coincidir con el nativeID del elemento relacionado:

tsx

<View>
  <Text nativeID="formLabel">Label for Input Field</Text>
  <TextInput aria-label="input" aria-labelledby="formLabel" />
</View>

Type
string

aria-live

Android

Indica que un elemento se actualizará y describe los tipos de actualizaciones que los agentes de usuario, las tecnologías de asistencia y el usuario pueden esperar de la región dinámica.

• off Los servicios de accesibilidad no deben anunciar cambios en esta vista.

• polite Los servicios de accesibilidad deben anunciar cambios en esta vista.

• assertive Los servicios de accesibilidad deben interrumpir el habla en curso para anunciar inmediatamente los cambios en esta vista.

Type	Default
enum('assertive', 'off', 'polite')	'off'

---

aria-modal

iOS

Valor booleano que indica si VoiceOver debe ignorar los elementos dentro de las vistas que son hermanas del receptor.

Type	Default
boolean	false

aria-selected

Indica si un elemento seleccionable está actualmente seleccionado o no.

Type
boolean

importantForAccessibility

Android

Cuando dos componentes de UI se superponen y tienen el mismo padre, el enfoque de accesibilidad predeterminado puede tener comportamiento impredecible. La propiedad importantForAccessibility resuelve esto controlando si una vista activa eventos de accesibilidad y si se reporta a servicios de accesibilidad. Puede configurarse como auto, yes, no y no-hide-descendants (este último valor forzará a los servicios de accesibilidad a ignorar el componente y todos sus hijos).

tsx

<View style={styles.container}>
  <View
    style={[styles.layout, {backgroundColor: 'green'}]}
    importantForAccessibility="yes">
    <Text>First layout</Text>
  </View>
  <View
    style={[styles.layout, {backgroundColor: 'yellow'}]}
    importantForAccessibility="no-hide-descendants">
    <Text>Second layout</Text>
  </View>
</View>

En el ejemplo anterior, el diseño yellow y sus descendientes son completamente invisibles para TalkBack y todos los demás servicios de accesibilidad. Así podemos usar vistas superpuestas con el mismo padre sin confundir a TalkBack.

onAccessibilityEscape

iOS

Asigna esta propiedad a una función personalizada que se llamará cuando alguien realice el gesto de "escape", que es un gesto en forma de Z con dos dedos. Una función de escape debe retroceder jerárquicamente en la interfaz de usuario. Esto puede significar subir o retroceder en una jerarquía de navegación o cerrar una interfaz modal. Si el elemento seleccionado no tiene una función onAccessibilityEscape, el sistema intentará ascender en la jerarquía de vistas hasta encontrar una que sí la tenga, o emitirá un sonido de error si no encuentra ninguna.

onAccessibilityTap

iOS

Usa esta propiedad para asignar una función personalizada que se llamará cuando alguien active un elemento accesible haciendo doble toque mientras está seleccionado.

onMagicTap

iOS

Asigna esta propiedad a una función personalizada que se llamará cuando alguien realice el gesto de "toque mágico", que es un doble toque con dos dedos. Una función de toque mágico debe realizar la acción más relevante que un usuario podría realizar en un componente. En la app Teléfono del iPhone, un toque mágico contesta una llamada o termina la actual. Si el elemento seleccionado no tiene una función onMagicTap, el sistema ascenderá en la jerarquía de vistas hasta encontrar una que sí la tenga.

role

role comunica el propósito de un componente y tiene precedencia sobre la propiedad accessibilityRole.

role puede ser uno de los siguientes:

• alert Se usa cuando un elemento contiene texto importante que debe presentarse al usuario.

• button Se usa cuando el elemento debe tratarse como un botón.

• checkbox Se usa cuando un elemento representa una casilla de verificación que puede estar marcada, desmarcada o en estado mixto.

• combobox Se usa cuando un elemento representa un cuadro combinado que permite seleccionar entre varias opciones.

• grid Se usa con ScrollView, VirtualizedList, FlatList o SectionList para representar una cuadrícula. Añade anuncios de entrada/salida de cuadrícula al GridView de Android.

• heading Se usa cuando un elemento actúa como encabezado de una sección de contenido (ej. el título de una barra de navegación).

• img Se usa cuando el elemento debe tratarse como una imagen. Puede combinarse con un botón o enlace, por ejemplo.

• link Se usa cuando el elemento debe tratarse como un enlace.

• list Se usa para identificar una lista de elementos.

• listitem Se usa para identificar un elemento en una lista.

• menu Se usa cuando el componente es un menú de opciones.

• menubar Se usa cuando un componente es un contenedor de múltiples menús.

• menuitem Se usa para representar un elemento dentro de un menú.

• none Se usa cuando el elemento no tiene ningún rol.

• presentation Se usa cuando el elemento no tiene ningún rol.

• progressbar Se usa para representar un componente que indica el progreso de una tarea.

• radio Se usa para representar un botón de opción.

• radiogroup Se usa para representar un grupo de botones de opción.

• scrollbar Se usa para representar una barra de desplazamiento.

• searchbox Se usa cuando un campo de texto también debe tratarse como un campo de búsqueda.

• slider Se usa cuando un elemento puede "ajustarse" (ej. un control deslizante).

• spinbutton Se usa para representar un botón que abre una lista de opciones.

• summary Se usa cuando un elemento puede proporcionar un resumen rápido de las condiciones actuales en la app al iniciarse.

• switch Se usa para representar un interruptor que puede activarse/desactivarse.

• tab Se usa para representar una pestaña.

• tablist Se utiliza para representar una lista de pestañas.

• timer Se utiliza para representar un temporizador.

• toolbar Se utiliza para representar una barra de herramientas (un contenedor de botones de acción o componentes).

Acciones de accesibilidad

Las acciones de accesibilidad permiten que la tecnología de asistencia invoque mediante programación las acciones de un componente. Para admitir acciones de accesibilidad, un componente debe hacer dos cosas:

• Definir la lista de acciones que admite mediante la propiedad accessibilityActions.

• Implementar una función onAccessibilityAction para manejar solicitudes de acciones.

La propiedad accessibilityActions debe contener una lista de objetos de acción. Cada objeto de acción debe contener los siguientes campos:

Name	Type	Required
name	string	Yes
label	string	No

Las acciones pueden representar acciones estándar (como hacer clic en un botón o ajustar un control deslizante) o acciones personalizadas específicas de un componente (como eliminar un mensaje de correo). El campo name es obligatorio para ambos tipos, mientras que label es opcional para acciones estándar.

Al agregar compatibilidad con acciones estándar, name debe ser uno de los siguientes:

• 'magicTap' - Solo para iOS - Cuando el foco de VoiceOver está en o dentro del componente, el usuario realiza un doble toque con dos dedos.

• 'escape' - Solo para iOS - Cuando el foco de VoiceOver está en o dentro del componente, el usuario realiza un gesto de frotar con dos dedos (izquierda, derecha, izquierda).

• 'activate' - Activar el componente. Debe realizar la misma acción con o sin tecnología de asistencia. Se activa cuando un usuario de lector de pantalla hace doble toque en el componente.

• 'increment' - Incrementar un componente ajustable. En iOS, VoiceOver genera esta acción cuando el componente tiene el rol 'adjustable' y el usuario desliza hacia arriba. En Android, TalkBack la genera al enfocar el componente y presionar el botón de subir volumen.

• 'decrement' - Decrementar un componente ajustable. En iOS, VoiceOver genera esta acción cuando el componente tiene el rol 'adjustable' y el usuario desliza hacia abajo. En Android, TalkBack la genera al enfocar el componente y presionar el botón de bajar volumen.

• 'longpress' - Solo para Android - Se genera cuando el usuario enfoca el componente y realiza un doble toque manteniendo un dedo presionado. Debe realizar la misma acción con o sin tecnología de asistencia.

• 'expand' - Solo para Android - "Expande" el componente haciendo que TalkBack anuncie una sugerencia de "expandido".

• 'collapse' - Solo para Android - "Contrae" el componente haciendo que TalkBack anuncie una sugerencia de "contraído".

El campo label es opcional para acciones estándar y suele ser ignorado por tecnologías de asistencia. Para acciones personalizadas, es una cadena localizada con la descripción de la acción para el usuario.

Para manejar solicitudes de acciones, un componente debe implementar una función onAccessibilityAction. Su único argumento es un evento que contiene el nombre de la acción a realizar. El siguiente ejemplo de RNTester muestra cómo crear un componente que define y maneja varias acciones personalizadas.

tsx

<View
  accessible={true}
  accessibilityActions={[
    {name: 'cut', label: 'cut'},
    {name: 'copy', label: 'copy'},
    {name: 'paste', label: 'paste'},
  ]}
  onAccessibilityAction={event => {
    switch (event.nativeEvent.actionName) {
      case 'cut':
        Alert.alert('Alert', 'cut action success');
        break;
      case 'copy':
        Alert.alert('Alert', 'copy action success');
        break;
      case 'paste':
        Alert.alert('Alert', 'paste action success');
        break;
    }
  }}
/>

Verificar si un lector de pantalla está habilitado

La API AccessibilityInfo permite determinar si un lector de pantalla está activo actualmente. Consulta la documentación de AccessibilityInfo para más detalles.

Sending Accessibility Events

Android

A veces es útil activar un evento de accesibilidad en un componente de UI (ej. cuando aparece una vista personalizada o al establecer foco de accesibilidad). El módulo nativo UIManager expone el método ‘sendAccessibilityEvent’ para este propósito. Recibe dos argumentos: una etiqueta de vista y un tipo de evento. Los tipos soportados son typeWindowStateChanged, typeViewFocused y typeViewClicked.

tsx

import {Platform, UIManager, findNodeHandle} from 'react-native';

if (Platform.OS === 'android') {
  UIManager.sendAccessibilityEvent(
    findNodeHandle(this),
    UIManager.AccessibilityEventTypes.typeViewFocused,
  );
}

Testing TalkBack Support

Android

Para activar TalkBack, abre la app Configuración en tu dispositivo o emulador Android. Toca Accesibilidad, luego TalkBack. Activa o desactiva el interruptor "Usar servicio".

Los emuladores de Android no tienen TalkBack instalado por defecto. Puedes instalarlo mediante Google Play Store. Asegúrate de elegir un emulador con Play Store instalado, disponibles en Android Studio.

Puedes usar el atajo de teclas de volumen para activar/desactivar TalkBack. Para activar este atajo, ve a Configuración > Accesibilidad y activa "Atajo con teclas de volumen".

Para usar el atajo, mantén presionadas ambas teclas de volumen durante 3 segundos para iniciar una herramienta de accesibilidad.

Adicionalmente, si lo prefieres, puedes activar/desactivar TalkBack mediante la línea de comandos con:

shell

# disable
adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService

# enable
adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService

Testing VoiceOver Support

iOS

Para activar VoiceOver en tu dispositivo iOS o iPadOS, ve a Configuración > General > Accesibilidad. Allí encontrarás herramientas disponibles para mejorar la usabilidad del dispositivo, incluyendo VoiceOver. Actívalo tocando el interruptor superior.

En la parte inferior de la configuración de Accesibilidad, encontrarás "Acceso directo de accesibilidad". Úsalo para activar VoiceOver presionando tres veces el botón de Inicio.

VoiceOver no está disponible en el simulador, pero puedes usar el Inspector de Accesibilidad de Xcode con VoiceOver de macOS. Nota: siempre es mejor probar en dispositivo físico, ya que VoiceOver de macOS puede dar experiencias variables.

Recursos adicionales

• Creando apps de React Native accesibles