Criterios de éxito más relevantes
Principios | A | AA | AAA |
---|---|---|---|
Perceptible |
1.3.1. Estructura y relaciones del contenido son correctas. 1.3.3. No hay instrucciones con características sensoriales. 1.4.1. No hay información basada sólo en color. 1.4.2. Pausar o detener el audio, o un mecanismo para controlar el volumen de audio. |
1.4.3. Contraste de color (mínimo) 1.4.4. El texto puede redimensionarse hasta un 200 por ciento sin pérdida de contenido o funcionalidad. 1.4.5. Evitar usar Imágenes de texto. |
1.4.6. Contraste de color (Mejorado) 1.4.7. Audio de fondo bajo o sin sonido. 1.4.8. Presentación Visual mejorada. 1.4.9. Imágenes de texto (Sin excepción) |
Operable |
2.1.1 La funcionalidad es operable por teclado. 2.1.2 Existe un medio para salir del foco de un elemento. Por ejemplo cerrar un tooltip. 2.2.1 El límite de tiempo para realizar acciones puede ajustarse o desactivarse. 2.2.2. Pausar, detener, ocultar multimedia. 2.3.1. Umbral de tres destellos o menos. 2.4.1 Hay un mecanismo disponible para eludir bloques de contenido (por ej. paginador). 2.4.4 Texto de enlaces comprensibles (en su contexto). |
2.4.5 Existe más de una manera para localizar o acceder al contenido importante del sitio. 2.4.6 Los encabezados y etiquetas describen el tema o propósito. 2.4.7 El foco está diseñado y puede distinguirse en cualquier elemento interactivo de la interfaz. |
2.1.3 Teclado (sin excepciones) 2.2.3 No hay tiempo para realizar acciones. 2.2.4 Las interrupciones pueden ser pospuestas o suprimidas por el usuario. 2.2.5. La re autenticación no implica pérdida de datos. 2.3.2 Las páginas no contienen nada que destelle más de tres veces por segundo. 2.4.8. Se informa al usuario su localización. 2.4.9 Permite identificar el propósito de cada enlace con sólo el texto. |
Comprensible |
3.2.1 No cambia el contexto al recibir el foco. 3.2.2 No cambia el contexto al accionar input. 3.3.1 Hacer que los contenidos textuales resulten legibles y comprensibles. 3.3.2 Labels o instrucciones para cada elemento de formulario. |
3.2.3 Navegación consistente. 3.2.4 Identificación consistente. 3.3.3 Sugerencias para corregir el error en el lugar donde se cometió. 3.3.4 Prevención de errores. |
3.1.3 Definiciones de palabras inusuales. 3.1.5 Contenido suplementario para texto de nivel de lectura avanzado. 3.2.5 Los cambios se realizan cuando el usuario los solicita y pueden deshacerse. 3.3.5 La ayuda está disponible en contexto. 3.3.6 Se requiere confirmación para acciones de envío/finalización o son reversibles. |
Robusto | 4.1.2. Productos de apoyo y agentes de usuario pueden acceder al contenido. |
Checklist para diseñadores
- Proporciona suficiente contrastes de color de los textos estáticos, interactivos y sus estados, respecto a su contexto y colores de fondo.
- Utiliza el color sólo para complementar el contenido y no como única diferenciación entre elementos que deban distinguirse.
- Asegura que los elementos interactivos se diferencian de los estáticos por color, forma, tamaño.
- Legibilidad de textos. Evita las variantes light de la fuente y el tamaño del texto menor a 13px.
- Que el lenguaje de los componentes sean lo más sencillos posibles y puedan ser comprendidos por todos los usuarios.
- Que la navegación sea clara y que haya elementos que ayuden al usuario a orientarse e ir hacia atrás o delante.
- Crea enlaces de texto y botones comprensibles incluso fuera de contexto y que sean perceptibles.
- Que los títulos y estructura semántica sean visualmente reconocibles a primera vista. (secciones, artículos, menú).
- Utiliza un tamaño mínimo de elementos interactivos (por ejemplo, botones de iconos) de 44 pixeles de área clickeable.
- Diseña cada estado de los elementos interactivos como enlaces o componentes de formulario.
- Ayuda al usuario diseñando mensajes de error y ayuda.
- Haz que los elementos se vean, posicionen y comporten de manera consistente y predecible en toda la interfaz.
- Sigue los patrones de diseño con los que el usuario acostumbra a interactuar.
- Evita usar imágenes o iconos que contengan texto, si utilizas infografías proporciona una alternativa textual a las mismas.