Principio 3/3.3 Assistencia en los input/3.3.1-A

3.3.1-A. Identificación de errores

3_Comprensible 3.3_Assistencia_en_los_input

• Nivel: A
• Versión: 2.0
• Principio: 3_Comprensible
• Pauta: 3.3_Assistencia_en_los_input
• Grupo: Formularios
• Subgrupo: Errores

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

• Cognitiva – Barrera grave
• Baja visión – Barrera moderada
• Visual total – Barrera grave

Enunciado del criterio (Observatorio de Accesibilidad Web)

• Se deben identificar los campos de formulario obligatorios que no han sido completados y se debe informar a los usuarios mediante un texto.

Comprensión del criterio

Descripción resumida

Indicar claramente qué campo contiene un error y el motivo del error mediante texto visible.

Objetivo

Garantizar que los usuarios detecten los errores y puedan corregirlos sin perder información ni contexto.

Importancia de cumplir el criterio

Las personas con discapacidad cognitiva, baja visión o que usan lector de pantalla pueden no percibir errores si solo se usa color o iconos. Es necesario texto claro y asociado al campo.

Referencias WCAG

• G83: Providing text descriptions to identify required fields that were not completed
• SCR18: Providing client-side validation and alert

Understanding Success Criterion 3.3.1

WCAG Quick Reference

Recursos de apoyo

Consejos

• Mensajes de error claros y visibles
• Asociación mediante aria-describedby
• Uso adecuado de aria-invalid

• Validating Input — W3C/WAI Forms Tutorial

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

1. Paso 1. Localizar los formularios existentes.
2. Paso 2. Intentar enviar el formulario sin haber completado los campos obligatorios.
3. Paso 3. Verificar que se informa a los usuarios mediante texto de qué campos obligatorios faltan por completar.

Resultado esperado

Los errores se identifican mediante texto y están asociados al campo correspondiente, facilitando su corrección.

Ejemplo

Error textual vinculado al campo.

<label for="email">Correo electrónico</label>
<input id="email" aria-describedby="email-error" aria-invalid="true">
<p id="email-error" class="error">Introduce un correo electrónico válido.</p>

Otras herramientas de evaluación

• Prueba funcional: intentar enviar el formulario sin completar los campos obligatorios y comprobar que aparece un mensaje de error textual indicando qué campo falta.
• Inspección del código: verificar uso correcto de required o aria-required="true" y que los mensajes de error están asociados al campo mediante aria-describedby u otro mecanismo adecuado.
• Lectores de pantalla: (NVDA, JAWS, VoiceOver) confirmar que el mensaje se anuncia automáticamente y que el usuario entiende qué campo debe corregir.
• Revisión visual: comprobar que la identificación del error no depende solo del color; debe haber texto claro explicando el problema.

Comentarios

A continuación se muestran comentarios sobre el criterio 3.3.1-A. Identificación de errores

Loading comments...