Diseño de UI y estilo

Para crear una app accesible, diseña tu UI pensando en la accesibilidad. Esta página cubre aspectos clave del diseño de UI y estilos accesibles.

Tanto Android como iOS incluyen ajustes del sistema para configurar los tamaños de fuente deseados que usan las apps. Los Widgets de texto de Flutter respetan esta configuración del SO al determinar los tamaños de fuente.

Los tamaños de fuente se calculan automáticamente en Flutter según los ajustes del SO. Sin embargo, como desarrollador debes asegurarte de que tu diseño tenga suficiente espacio para renderizar todo su contenido cuando se incrementen los tamaños de fuente. Por ejemplo, puedes probar todas las partes de tu app en un dispositivo de pantalla pequeña configurado con la opción de fuente más grande.

Para ajustar los tamaños de fuente: en iOS, ve a Ajustes > Accesibilidad > Pantalla y tamaño del texto; en Android, ve a Ajustes > Tamaño de fuente.

Las siguientes dos capturas de pantalla muestran la plantilla estándar de la app de Flutter renderizada con la configuración de fuente predeterminada de iOS, y con la configuración de fuente de accesibilidad más grande seleccionada en los ajustes de iOS.

Un contraste de color suficiente hace que el texto y las imágenes sean más fáciles de leer. Además de beneficiar a usuarios con diversas discapacidades visuales, un contraste de color suficiente ayuda a todos los usuarios al visualizar una interfaz en dispositivos en condiciones de iluminación extremas, como cuando están expuestos a la luz solar directa o en una pantalla con brillo bajo.

El W3C recomienda:

• Al menos 4.5:1 para texto pequeño (por debajo de 18 puntos regular o 14 puntos negrita)
• Al menos 3.0:1 para texto grande (18 puntos o superior regular, o 14 puntos u superior negrita)

Puedes probar el contraste utilizando la Accessibility Guideline API de Flutter. Para obtener más detalles sobre las pruebas, consulta la página de pruebas de accesibilidad.

Los controles que son demasiado pequeños son difíciles de interactuar y seleccionar para muchas personas. Asegúrate de que los elementos interactivos tengan un objetivo táctil lo suficientemente grande para ser fácilmente presionados por los usuarios.

Tanto Android como iOS recomiendan un tamaño mínimo de objetivo táctil de 48x48 dp y 44x44 pts respectivamente.

El W3C recomienda un tamaño mínimo de objetivo de 44 por 44 píxeles CSS.

Puedes probar el tamaño del objetivo táctil utilizando la Accessibility Guideline API de Flutter. Para obtener más detalles sobre las pruebas, consulta la página de pruebas de accesibilidad.

Puedes consultar la clase AccessibilityFeatures para obtener funciones de accesibilidad adicionales que puedan estar habilitadas por la plataforma, tales como texto en negrita, alto contraste y colores invertidos.