Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung
Accesibilidad
¿Cómo muestra un sitio web correctamente los errores de formulario?
Un sitio web muestra errores de formulario correctamente nombrando el campo afectado y describiendo el error en palabras: «Por favor, ingrese su dirección de correo electrónico». Solo un marco rojo no es suficiente — los visitantes ciegos no lo ven, los visitantes daltónicos lo pasan por alto. El criterio WCAG 3.3.1 requiere que los errores de entrada detectados se descubran automáticamente e informen al visitante en formato de texto.
Un marco rojo solo deja que los visitantes adivinen
Imagine un formulario de contacto que regresa con el mensaje «Por favor, revise sus entradas» — eso es todo lo que dice. Un visitante vidente busca marcos rojos. Un visitante ciego ni siquiera tiene esa oportunidad: su lector de pantalla lee texto, no colores. Pasa por cada campo nuevamente y adivina dónde está el problema. Muchos se rinden en este punto — y usted pierde una consulta o un pedido. Un buen mensaje de error dice tres cosas: qué campo se ve afectado, qué está mal y, en el mejor de los casos, cómo debería verse. Además, el mensaje debe estar técnicamente vinculado al campo para que los lectores de pantalla lo anuncien en el campo en sí.
Así mide el servicio de comprobación la detección de errores
El servicio de comprobación prueba su formulario en un navegador real con un intento controlado: busca un formulario con campos obligatorios y lo envía deliberadamente vacío. Luego observa la reacción. Si los campos obligatorios están marcados como erróneos y la descripción del error está técnicamente vinculada a los campos, el criterio se considera cumplido — el informe señala cuántos campos se nombraron correctamente. Los campos de búsqueda puros y los formularios sin campos obligatorios se dejan deliberadamente fuera para no desencadenar nada no deseado en su sitio web; estos casos se señalan como un punto de prueba manual en el informe. En el estándar Oro, una persona verifica además si los textos de error están bien formulados.
Ejemplos
Error sin ubicación y texto
<p class="rot">Bitte Eingaben prüfen.</p>
<input name="iban"><label for="iban">IBAN</label>
<input id="iban" name="iban" aria-invalid="true" aria-describedby="iban-fehler">
<p id="iban-fehler">IBAN: 20 Zeichen erwartet, 18 eingegeben.</p>El mensaje señala el campo y el error y está conectado al campo para que el programa de lectura lo anuncie al campo.
- Envíe su formulario de contacto una vez deliberadamente vacío y lea el mensaje de error con los ojos de un extraño.
- Formule cada mensaje de error según el patrón: nombre del campo, problema, solución — «Dirección de correo electrónico: por favor ingrese una dirección con un signo @».
- Pida a su agencia que vincule técnicamente los mensajes de error con el campo respectivo para que los lectores de pantalla los anuncien.
- Nunca confíe solo en el color — cada marco rojo necesita un texto explicativo al lado.
