Fallo común WCAG 2.2
F81Campos obligatorios o con error marcados solo con color
Nombre oficial en el W3C: Fallo del criterio de conformidad 1.4.1 debido a identificar los campos obligatorios o con error únicamente mediante diferencias de color
En pocas palabras
Este fallo ocurre cuando un formulario indica qué campos son obligatorios, o cuál tiene un error, solo con un cambio de color. Por ejemplo, una etiqueta en rojo o un borde rojo. Quien no distingue bien los colores no recibe el aviso. Hay que añadir texto u otra señal que no dependa del color.
Por qué es importante
Unos 8 de cada 100 hombres tienen algún tipo de daltonismo. Muchos no distinguen bien el rojo del verde o del negro. Las personas con baja visión, o quien mira el móvil a pleno sol, tampoco notan bien esas diferencias.
Si el único aviso es el color, no saben qué campos deben rellenar. Envían el formulario de cita previa, les da error y no saben qué corregir. Los lectores de pantalla (programas que leen en voz alta lo que hay en la pantalla) tampoco anuncian el color.
Cómo evitarlo
- Añada a la etiqueta de cada campo obligatorio el texto «(obligatorio)». También vale un asterisco, si al principio del formulario se explica qué significa.
- Ponga el atributo
requireden el campo, para que el lector de pantalla anuncie que es obligatorio. - Muestre cada error con un mensaje de texto junto al campo, por ejemplo «Error: introduzca un teléfono de 9 cifras».
- Una ese mensaje al campo con
aria-describedbyy marque el campo conaria-invalid="true". - Puede seguir usando el rojo como refuerzo. Si solo hay una diferencia visual, debe notarse sin color: negrita, otra letra o un contraste de 3:1 con el resto del texto.
Ejemplo práctico
Este fallo aparece a diario en formularios de cita previa, contacto o compra. Los campos obligatorios se distinguen solo porque su etiqueta está en rojo. Los campos con error, solo porque su borde cambia de color.
Así no: Obligatorio y error indicados solo con rojo
Las etiquetas obligatorias usan #b00020 y las demás #0B2239. Cambia el tono, pero el contraste entre los dos colores es de unos 2,2:1. No basta para distinguirlos en escala de grises ni para quien percibe mal los colores. Además, el campo «Teléfono» con error solo lleva un borde rojo, sin texto que lo explique.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<style>
label { display: block; margin-top: 8px; color: #0B2239; }
.oblig { color: #b00020; }
.error { border: 2px solid #b00020; }
</style>
<form action="#">
<p>Los campos en rojo son obligatorios.</p>
<label for="nom" class="oblig">Nombre y apellidos</label>
<input id="nom" type="text" autocomplete="name">
<label for="tel" class="oblig">Teléfono</label>
<input id="tel" type="tel" class="error" autocomplete="tel" value="9681">
<label for="com">Comentarios</label>
<textarea id="com" rows="2"></textarea>
<p><button type="submit">Pedir cita</button></p>
</form>Así sí: Texto además del color
Se mantiene el rojo, pero ya no es la única pista. Cada etiqueta obligatoria dice «(obligatorio)» y su campo lleva required. El campo con error muestra un mensaje que empieza por «Error:». Ese mensaje se une al campo con aria-describedby, y el campo lleva aria-invalid="true". La información ya no depende solo del color.
Pruébelo aquí:
Ver el código del ejemplo correcto
<style>
label { display: block; margin-top: 8px; color: #0B2239; }
.oblig { color: #b00020; }
.error { border: 2px solid #b00020; }
.msg-error { color: #b00020; font-weight: bold; margin: 4px 0 0; }
</style>
<form action="#">
<p>Los campos marcados con «(obligatorio)» deben rellenarse.</p>
<label for="nom" class="oblig">Nombre y apellidos (obligatorio)</label>
<input id="nom" type="text" autocomplete="name" required>
<label for="tel" class="oblig">Teléfono (obligatorio)</label>
<input id="tel" type="tel" class="error" autocomplete="tel" value="9681"
required aria-invalid="true" aria-describedby="tel-error">
<p id="tel-error" class="msg-error">Error: introduzca un teléfono de 9 cifras.</p>
<label for="com">Comentarios</label>
<textarea id="com" rows="2"></textarea>
<p><button type="submit">Pedir cita</button></p>
</form>Cómo comprobarlo
Errores frecuentes en auditorías
- La leyenda «Los campos en rojo son obligatorios», o un asterisco del mismo color que el texto sin explicar qué significa.
- Campos con error marcados solo con un borde o un fondo rojo al enviar el formulario, sin mensaje de texto.
- Un asterisco oculto a los lectores de pantalla con aria-hidden, sin required ni aria-required en el campo.
- Validación al escribir que solo cambia el borde de rojo a verde para indicar si el dato es correcto.
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica F81 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
Todas las tecnologías
Descripción
El objetivo de esta técnica es describir el fallo que se produce cuando un campo obligatorio o un campo con error se marca únicamente mediante diferencias de color, sin una forma alternativa de identificar el campo obligatorio o el campo con error. Esto puede causar problemas a las personas con deficiencias en la percepción del color o con baja visión, porque pueden no ser capaces de percibir las diferencias de color que indican qué campo es obligatorio o qué campo está provocando un error.
Ejemplos
- Un usuario está rellenando un formulario en línea y el campo del número de teléfono es obligatorio. Para indicar que el campo del número de teléfono es obligatorio, la etiqueta «Número de teléfono» se muestra en un color distinto del que se usa para los campos opcionales, sin ninguna otra indicación de que «Número de teléfono» es un campo obligatorio. Una persona con deficiencias en la percepción del color o con baja visión puede no ser capaz de identificar que «Número de teléfono» es un campo obligatorio.
- Un usuario envía un formulario en línea y deja en blanco un campo obligatorio, lo que provoca un error. El campo de formulario que ha provocado el error se indica únicamente con texto en rojo, sin ninguna indicación adicional no basada en el color de que ese campo ha provocado un error.
En ambos ejemplos, el color podría usarse sin incurrir en fallo si el texto fuese lo bastante distinto en su presentación visual (p. ej., en negrita o con otra tipografía) como para diferenciarse fácilmente del texto circundante aunque se eliminase el color. Tampoco fallaría si el color elegido tuviese una diferencia de luminosidad (claridad) suficiente respecto al resto del texto para que se viese fácilmente como distinto al visualizarlo en blanco y negro. Se considera suficiente una relación de contraste mínima de 3:1. En estos casos, la información no se mostraría únicamente mediante el color (tono), sino también mediante la «presentación» o la «luminosidad», respectivamente. Sin embargo, aunque esto satisface el requisito visual del criterio 1.4.1, el ejemplo todavía puede fallar otros requisitos, como los de los criterios 1.3.1, 3.3.1 y 4.1.2.
Pruebas
Procedimiento
Para todos los campos obligatorios o campos con error de la página web que se identifican mediante diferencias de color:
- Comprobar que se proporciona una forma no basada en el color de identificar el campo obligatorio o el campo con error.
Resultados esperados
- Si la comprobación n.º 1 es falsa, se da esta condición de fallo y el contenido falla el criterio de conformidad.
Cómo lo comprobamos en ADDAW
Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.
Basado en la técnica F81 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.