Diseño visual
Los usuarios pueden tener diferentes habilidades visuales. Como experto visual, tu rol es garantizar de que todos pueden ver la información que se muestra en tu app.
Checklist de accesibilidad
1. Color y contraste
Los usuarios tienen que poder distinguir el contenido del fondo y entender con o sin colores.
- Usa una herramienta de contraste de color o un plugin de Sketch para crear un ratio de contraste de al menos 4.5:1 entre el fondo y los textos pequeños. Para textos grandes (desde 14pt negrita/18 pt regular), el ratio debe ser de al menos 3:1.
- Prueba tu paleta de colores con el Accesible Color Palette Builder o el Contrast Grid.
- No uses color solo para transmitir significado. Recomendamos diseñar primero en blanco y negro. Si es necesario, puedes usar un simulador de daltonismo.
Referencias WCAG 2.1
Guideline 1.4.3 – Contrast (Minimum)
2. Tipografía
Los usuarios tienen que leer fácilmente el contenido.
- Usa la tipografía de FOLIO.
- Usa titulares para comunicar jerarquía.
- Mantén un largo de línea que ayuda a una lectura confortable (alrededor de 66 caracteres por línea).
- Usa líneas más cortas para subtítulos, textos marginales y formularios.
Recursos FOLIO
Referencias WCAG 2.1
3. Gráficos e imágenes
Los usuarios tienen que ser capaces de entender fácilmente cualquier gráfico, icono e imagen.
- Garantiza que todos los gráficos tienen subtítulos descriptivos.
- Evita usar gráficos cuando el contenido escrito pueda comunicar lo mismo.
- Ubica iconos de app al lado de los elementos para indicar visualmente de donde vienen dichos elementos.
- Utiliza botones de icono comúnmente usados.
- Añade un fondo sólido detrás del texto o un borde oscuro a la imagen para usar texto sobre las imágenes.
Recursos FOLIO
Referencias WCAG 2.1
1.1 Text Alternatives (Guideline)
4. Visualizaciones de datos
Los usuarios tienen que poder leer y entender el significado de un gráfico fácilmente.
- Sigue las mejores prácticas de visualización de datos.
- Apoya los elementos visuales con una descripción de tendencia general para dar contexto.
- Asegúrate de usar titulares claros.
- Asegúrate de tener suficiente contraste entre los colores de los gráficos.
- Añade una tabla de información del gráfico.
Referencias WCAG 2.1
1.1 Text Alternatives (Guideline)
5. Formularios
Los usuarios tienen que rellenar formularios fácilmente.
- Usa los componentes de campos de texto de FOLIO para crear formularios.
- Proporciona feedback visual para indicar errores, avisos y mensajes de éxito.
Recurso FOLIO
Referencias WCAG 2.0
Guideline 3.3 Input Assistance
6. Elementos táctiles
Los elementos táctiles deben ser suficientemente grandes para que cualquiera pueda clicar en ellos.
- Garantiza que se pueden realizar acciones primarias fácilmente con ambos pulgares, incluso en grandes smartphones.
- Haz los elementos táctiles de al menos 48px. Para los iconos, puedes trabajar con tu desarrollador para extender el margen interno más allá del icono.
- Deja un espacio exterior en los elementos táctiles de 8px o más.
Recursos
Test de accesibilidad
Nosotros recomendamos usar aXe para testar la accesibilidad de tu app. Es una buena extensión de Chrome que te permite ver en un momento si tu app tiene problemas de accesibilidad, dónde encontrarlos y cómo arreglarlos.
Encuentra el link de descarga de aXe con instrucciones de uso en nuestra sección de Recursos de diseño.
Más información
Si tienes preguntas sobre el nivel de accesibilidad de tu app, únete a nosotros en Slack para hablar con expertos en nuestro canal #accessibility.