La accesibilidad web es fundamental para garantizar que todas las personas, incluidas aquellas con discapacidades visuales como el daltonismo o ceguera total, puedan interactuar con formularios en línea sin dificultades. Un problema común es el uso exclusivo del color para identificar campos obligatorios o errores en formularios, lo que puede hacer que algunos usuarios no perciban estas diferencias.
Este fallo, identificado como F81 en WCAG 2.1, incumple el Criterio de Conformidad 1.4.1: Uso del Color. Se estima que alrededor del 8% de los hombres y el 0.5% de las mujeres tienen alguna forma de daltonismo, lo que significa que si los formularios solo usan color para indicar errores o requisitos, pueden ser inaccesibles para muchas personas.
Acerca de este fallo
El fallo F81 ocurre cuando un formulario indica campos obligatorios o errores únicamente con un cambio de color, sin proporcionar otras señales visuales como texto, iconos o indicadores de accesibilidad.
Escenarios comunes del fallo
- Etiquetas de campos obligatorios resaltadas solo en rojo sin un texto adicional.
- Campos con error resaltados en rojo sin iconos o mensajes explicativos.
- Indicaciones de éxito o error solo con colores, sin descripciones adicionales.
Ejemplos
Ejemplo incorrecto 1: Campo obligatorio indicado solo con color rojo
<label for=»telefono» style=»color: red;»>Teléfono</label>
<input type=»text» id=»telefono» name=»telefono»>
🔴 Problema: Un usuario con daltonismo no percibirá la diferencia de color y no sabrá que el campo es obligatorio.
Solución correcta: Añadir un asterisco y texto explicativo
<label for=»telefono»>Teléfono <span style=»color: red;»>*</span> <span class=»sr-only»>(Campo obligatorio)</span></label>
<input type=»text» id=»telefono» name=»telefono» aria-required=»true»>
✅ ¿Qué mejora?: Se mantiene el color rojo, pero ahora hay un asterisco y un texto adicional oculto para lectores de pantalla.
Ejemplo incorrecto 2: Mensaje de error solo en rojo
<input type=»email» id=»email» name=»email» required>
<span style=»color: red;»>¡Este campo es obligatorio!</span>
🔴 Problema: Un usuario con ceguera o daltonismo no podrá diferenciarlo si solo depende del color.
Solución correcta: Mensaje de error con icono y texto visible
<input type=»email» id=»email» name=»email» required>
<span class=»error»>
❌ <strong>Este campo es obligatorio</strong>
</span>
✅ ¿Qué mejora?: Se añade un icono visual y el texto en negrita, para que la información no dependa solo del color.
Ejemplo correcto: Solución ideal
<label for=»nombre»>Nombre <span style=»color: red;»>*</span></label>
<input type=»text» id=»nombre» name=»nombre» aria-required=»true»>
<span class=»error»>
❌ <strong>Por favor, introduce tu nombre</strong>
</span>
✅ ¿Qué mejora?
- Usa un asterisco y mensaje claro para indicar que es obligatorio.
- Agrega un icono para reforzar visualmente la advertencia.
- Usa
aria-required="true"para mejorar accesibilidad en lectores de pantalla.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Usar solo color para indicar errores o campos obligatorios.
- No incluir textos o iconos adicionales para la identificación.
- Mensajes de error en color rojo sin más detalles.
Cómo evitar estos errores:
- Agregar textos adicionales, como “Campo obligatorio” o “Error en el formulario”.
- Usar iconos o símbolos, como asteriscos o ❌.
- Implementar atributos como
aria-required="true"para mejorar accesibilidad.
Preguntas frecuentes sobre el fallo F81
¿Por qué no es suficiente marcar los errores solo con color?
Porque las personas con daltonismo o ceguera pueden no notar el cambio. Se necesita texto adicional o iconos para mayor claridad.
¿Qué elementos visuales pueden ayudar además del color?
Negritas, subrayados, iconos, texto adicional y descripciones para lectores de pantalla.
¿Puedo usar color si también agrego otro indicador?
Sí, el color puede usarse como refuerzo, pero nunca debe ser la única indicación.
¿Cómo se prueba si un formulario cumple con WCAG?
Utiliza simuladores de daltonismo o desactiva los colores en el navegador para verificar si los errores siguen siendo visibles.
¿Los formularios en imágenes deben cumplir con esta regla?
Sí, pero en ese caso la imagen debe tener un texto alternativo adecuado explicando los errores.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F81: Incumplimiento del Criterio de Conformidad 1.4.1 debido a la identificación de campos obligatorios o de error utilizando únicamente diferencias de color
- Comprender el criterio de éxito 1.4.1: Uso del color
Pruebas y validación
Procedimiento
- Revisa si los campos obligatorios o errores están marcados solo por color.
- Asegúrate de que haya texto adicional, iconos o estilos diferenciados.
- Verifica que los lectores de pantalla puedan identificar los errores.
Resultados esperados
- ✅ Si los errores o campos obligatorios tienen señales adicionales al color, el contenido es accesible.
- ❌ Si dependen solo del color, el formulario es inaccesible y debe corregirse.
Evitar el fallo F81 es clave para garantizar formularios accesibles. Asegúrate de que los campos obligatorios y los errores sean identificables sin depender solo del color. Aplicando iconos, negritas y textos explicativos, mejorarás la experiencia de todos los usuarios.
💡 ¿Necesitas ayuda para mejorar la accesibilidad de tu sitio web? Contáctanos para una auditoría y optimización accesible. 🚀