Accesibilidad en React Native: guía completa

Accesibilidad: no solo ética, también negocio

En muchos mercados, la accesibilidad es un requisito legal (ADA en EEUU, Ley 24.901 en Argentina para discapacidad). Más allá de la ley, 1 de cada 5 personas tiene algún tipo de discapacidad. Una app accesible llega a más usuarios. En Deepyze incorporamos accesibilidad desde el diseño.

Lectores de pantalla

VoiceOver (iOS) y TalkBack (Android) son los lectores de pantalla incluidos en los sistemas operativos. Para que funcionen correctamente con tu app React Native:

// Agregar etiquetas accesibles
<TouchableOpacity
  accessible={true}
  accessibilityLabel="Botón de confirmar pedido"
  accessibilityRole="button"
  accessibilityHint="Doble tap para confirmar tu pedido"
>
  <Text>Confirmar</Text>
</TouchableOpacity>

accessibilityRole

Indicá el rol semántico de cada elemento: button, link, header, image, text, checkbox, radio.

Contraste de colores

El ratio de contraste mínimo WCAG AA es 4.5:1 para texto normal y 3:1 para texto grande. Usá herramientas como Stark (plugin de Figma) para verificar antes de implementar.

Tamaño de elementos táctiles

El tamaño mínimo recomendado para touch targets es 44x44 puntos (iOS) y 48x48 dp (Android). Asegurate de que todos los botones e iconos sean fácilmente presionables.

Testing de accesibilidad

Testá con VoiceOver/TalkBack activado: navegá toda la app usando solo el lector de pantalla. Si podés completar los flujos principales sin ver la pantalla, tu accesibilidad es buena.

¿Querés que implementemos accesibilidad completa en tu app? Hablá con Deepyze.