Mejores prácticas de accesibilidad
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.
//
Busca en todas las páginas de la documentación
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.
Nombra cada control interactivo: Proporciona accessibilityLabel, texto visible, o accessibilityLabelledBy - los botones solo con iconos sin nombres fallan en VoiceOver y en la revisión de tienda.
Establece el accessibilityRole correcto: Usa button para acciones, link para navegación, header para títulos de sección, y switch en conmutadores nativos - los roles establecen las expectativas del usuario.
Expone el estado con accessibilityState: Comunica selected, disabled, checked, y expanded - nunca confíes solo en el color para la selección o errores.
Oculta contenido decorativo: Establece accessible={false} e importantForAccessibility="no-hide-descendants" en adornos, chevrones redundantes y arte de fondo.
Aplica objetivos de 44×44 pt: Usa minHeight, padding, o hitSlop en visuales pequeños - los usuarios de toque y control de interruptor necesitan regiones de toque generosas.
Centraliza la semántica en el sistema de diseño: Los envoltorios AppButton, IconButton, y Field requieren etiquetas a nivel de tipo - las características no deben reinventar patrones de Pressable sin procesar.
Reenvía props de accesibilidad en primitivos: Los componentes personalizados aceptan y pasan accessibilityLabel, accessibilityHint, y accessibilityState como el Pressable subyacente.
El placeholder no es una etiqueta: TextInput necesita una etiqueta visible o accessibilityLabelledBy - los campos solo con placeholder fallan en auditorías de formularios.
Anuncia actualizaciones dinámicas significativas: Usa AccessibilityInfo.announceForAccessibility o accessibilityLiveRegion para conteos de carrito, errores de envío, y finalización asincrónica - no cada re-renderizado.
Agrupa filas de lista en una parada de enfoque: Las tarjetas tocables deben fusionar título, precio y metadatos en una única etiqueta - reduce gestos para TalkBack y Control de Interruptor.
Prueba VoiceOver en un iPhone físico: El humo del simulador es insuficiente - el comportamiento del rotor, el tiempo de sugerencia y los problemas de enfoque aparecen en el dispositivo.
Prueba TalkBack en un Android físico: importantForAccessibility y las regiones en vivo difieren de iOS - lanza solo después de un recorrido por el dispositivo Android.
Consulta pruebas por rol y nombre: React Native Testing Library getByRole('button', { name: 'Save' }) alinea CI con tecnología asistiva - testID solo oculta brechas de etiquetas.
Ejecuta eslint-plugin-react-native-a11y en CI: Detecta etiquetas faltantes antes de la revisión - trata lint como necesario, no suficiente.
Permite el escalado de fuente en el cuerpo de texto: allowFontScaling es verdadero por defecto - nunca deshabilites globalmente; limita la interfaz densa con maxFontSizeMultiplier en su lugar.
Usa diseños flexibles en tamaños de texto grandes: Prefiere minHeight, flexWrap, y reflow de columna sobre height fijo + numberOfLines={1} en etiquetas principales.
Lee la escala de fuente en la reanudación de la aplicación: PixelRatio.getFontScale() después de AppState activo - los usuarios cambian el tamaño del texto mientras tu aplicación está en segundo plano.
Respeta Reduce Motion: Suscríbete a reduceMotionChanged y pasa ReduceMotion.System a animaciones de entrada y temporización de Reanimated.
Nunca bloquees tareas en animación: Los usuarios con movimiento reducido habilitado deben alcanzar el estado final de la interfaz instantáneamente - proporciona alternativas sin gestos para acciones de deslizamiento.
Atrapa el enfoque del modal: Establece accessibilityViewIsModal en hojas y diálogos; restaura el enfoque al disparador al descartar con setAccessibilityFocus.
Mueve el enfoque en cambios de navegación: La selección maestro-detalle, pasos del asistente y éxito posterior al envío deben colocar el enfoque del lector de pantalla en el nuevo encabezado principal.
Habilita recorrido de teclado de hardware: focusable en controles Pressable accionables y returnKeyType="next" cadenas en formularios - crítico para iPad y DeX.
Ejecuta la lista de verificación de auditoría antes de RC: Nivel 1-2 en cada lanzamiento; puntuación P0/P1/P1 - ver Lista de verificación de auditoría de accesibilidad.
Coordina con la política de animaciones: Empareja comprobaciones de AccessibilityInfo con ReduceMotion.System de Reanimated - ver Movimiento reducido y Animaciones movimiento reducido.
Documenta las brechas conocidas para compradores empresariales: Rastrea puntuaciones de lista de verificación por lanzamiento; publica contacto de accesibilidad y línea de tiempo de remediación - las adquisiciones preguntan antes que los usuarios.
Versiones de stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última actualización: 16 jul 2026