UX
Todas las apps de FOLIO deben ser fáciles de entender. Como experto en UX, tu rol es asegurarte de que tu app es intuitiva y fácil de usar para todos.
Checklist de accesibilidad
1. Layout & jerarquía
Los usuarios tienen que ser capaces de entender fácilmente las páginas y llevar a cabo tareas.
- Si es posible, usa los layouts de FOLIO para construir tu app.
- Si creas un layout personalizable, asegúrate de ubicar los elementos acorde a su nivel relativo de importancia, considera el orden de lectura y ubica siempre elementos relacionados próximos entre sí. También recomendamos mirar otras apps similares.
- Asegúrate de ubicar las acciones del panel a la derecha del header del panel.
- Usa patrones FOLIO UX para hacer que las páginas aparezcan y operen de manera predecible, lógica e intuitiva.
Recursos FOLIO
Referencias WCAG 2.1
2. Contenido
Los usuarios deben ser capaces de escanear una página y entender su contenido fácilmente.
- Usa frases cortas cuando sea posible.
- Usa titulares claros y descriptivos. Los títulos del header del panel tienen que estar siempre relacionados con el propósito del panel y/o su relación con los otros paneles.
- Usa títulos de página descriptivos.
- Divide el contenido en secciones usando el componente acordeón de FOLIO.
- Ten una página legible y funcional cuando el zoom sea del 300%.
- Aplica las reglas del lenguaje de FOLIO para mayor consistencia.
Recursos de FOLIO
Referencias WCAG 2.0
3. Formularios
Los usuarios deberían entender y rellenar un formulario fácilmente.
- Tener rótulos claros y descriptivos.
- Mostrar errores/avisos a los usuarios justo debajo del correspondiente campo de búsqueda.
- Trabaja con tu diseñador front-end para usar los elementos de formulario de HTML lo máximo posible.
- Prueba cualquier interacción personalizable para ser usada solo con lectores de pantalla y teclado.
Recursos FOLIO
Referencias WCAG 2.1
Guideline 3.3 Input Assistance
4. Imágenes
Si una imagen es importante, los usuarios deberían acceder fácilmente a ella y entenderla.
- Trabaja con tu diseñador front end para implementar imágenes que sean puramente decorativas, de manera que pueden ser ignoradas por tecnología de asistencia.
- Trabaja con tu diseñador front end para asegurarte de que las imágenes importantes incluyen un texto explicativo si no hay rótulo. Si no, considera añadir tooltips para mostrar el significado de una imagen o icono.
Referencias WCAG 2.1
1.1 Text Alternatives (Guideline)
5. Orden de tabulación
Los usuarios deben ser capaces de navegar en tu app usando el teclado.
- Asegúrate de tener un orden lógico de tabulación para ayudarles a ello. Si es necesario, trabaja con tu diseñador front-end para ayudarle a entender el orden.
Referencias WCAG 2.1
6. Foco
Cuando los usuarios navegan a través de tu app, todos los elementos interactivos tienen que tener un estado de foco cuando sea necesario.
- Asegúrate de tener un orden de foco lógico. Si es necesario, trabaja con tu diseñador front-end para verificar que todos los elementos interactivos tienen este estado.
Referencias WCAG 2.1
7. Atajos de navegación
Los usuarios tienen que ser capaces de usar shortcuts de navegación.
- Trabaja con tu diseñador front end para identificar los puntos de referencia básicos en tus pantallas.
Referencias WCAG 2.1
8. Elementos táctiles
Los elementos táctiles tienen que ser suficientemente grandes para que cualquiera pueda hacer click en ellos.
- Asegúrate de que puedas realizar acciones primarias fácilmente con ambos pulgares.
- Haz los elementos clicables de al menos 48px. Para los iconos, puedes trabajar con tu desarrollador para extender los márgenes 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.