Diferencia entre revisiones de «Principio 3/3.3 Assistencia en los input/3.3.3-A»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestra una edición intermedia del mismo usuario)
Línea 7: Línea 7:
|wcag_principio=3_Comprensible
|wcag_principio=3_Comprensible
|wcag_principio_url=Principio_3
|wcag_principio_url=Principio_3
|wcag_pauta=3.3_Asistencia_en_la_entrada
|wcag_pauta=3.3_Assistencia_en_los_input
|wcag_pauta_url=Principio_3/3.3_Asistencia_en_la_entrada
|wcag_pauta_url=Principio_3/3.3_Assistencia_en_los_input
|wcag_grupo=Formularios
|wcag_grupo=Formularios
|wcag_subgrupo=Errores
|wcag_subgrupo=Errores
Línea 30: Línea 30:


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
Al detectar automáticamente un error cuando los usuarios introducen datos se proporcionan sugerencias para hacer la corrección, siempre que sea posible proporcionar dicha sugerencia y esto no comprometa la seguridad o la finalidad del contenido.
Al detectar automáticamente un error cuando los usuarios introducen datos se proporcionan sugerencias para hacer la corrección, siempre que sea posible se debe proporcionar dicha sugerencia y esto no debe comprometer la seguridad o la finalidad del contenido.
 


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Línea 43: Línea 44:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G177 G177: Providing suggested correction text]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html Understanding Success Criterion 3.3.3: Error Suggestion]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html Understanding Success Criterion 3.3.3: Error Suggestion]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/quickref/#error-suggestion WCAG Quick Reference – 3.3.3]</span></li>
<li>[https://webaim.org/techniques/forms/ WebAIM — Accessible Form Validation]</li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Mensajes de error con instrucciones específicas</li>
<li>Mensajes de error con instrucciones específicas</li>
Línea 59: Línea 60:
|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Introducir valores incorrectos en campos con formato o validación.</li>
<li><span class="paso-badge">Paso 1.</span>
<li><span class="paso-badge">Paso 2.</span> Verificar que se ofrece una sugerencia clara para corregir el error.</li>
Localizar los formularios existentes.
<li><span class="paso-badge">Paso 3.</span> Confirmar que la sugerencia no revela información sensible.</li>
</li>
<li><span class="paso-badge">Paso 4.</span> Validar visibilidad y asociación semántica.</li>
 
<li><span class="paso-badge">Paso 5.</span> Probar con lector de pantalla.</li>
<li><span class="paso-badge">Paso 2.</span>
Intentar enviar el formulario introduciendo valores erróneos en los campos.
</li>
 
<li><span class="paso-badge">Paso 3.</span>
Cuando la información proporcionada por el usuario sea incorrecta pero sea posible conocer un valor correcto sugerido, comprobar si la página ofrece un texto con la corrección.
</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Línea 71: Línea 79:
|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
<strong>✅ Ejemplo accesible: sugerencia clara ligada al campo</strong>
Sugerencia clara unida al campo (aria-describedby="email-error" y id="email-error")
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<label for="email">Correo electrónico</label>
<label for="email">Correo electrónico</label>
Línea 77: Línea 85:
<p id="email-error" class="error" role="alert">
<p id="email-error" class="error" role="alert">
   El formato no es válido. Prueba algo como nombre@ejemplo.com
   El formato no es válido. Prueba algo como nombre@ejemplo.com
</p>
</pre>
</div>
<div class="accessibility-card">
<strong>✅ Ejemplo accesible: contraseña</strong>
<pre class="wcag-codigo-html">
<label for="password">Contraseña</label>
<input id="password" type="password" aria-describedby="pass-error" aria-invalid="true">
<p id="pass-error" class="error" role="alert">
  La contraseña debe tener al menos 8 caracteres y una letra.
</p>
</p>
</pre>
</pre>
Línea 94: Línea 91:
|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Validación accesible en servidor y cliente</li>
<li>'''Prueba funcional''': introducir datos incorrectos (p. ej., email sin “@”, número fuera de rango, formato de fecha erróneo) y comprobar que se ofrece una sugerencia clara y accesible para corregirlo cuando sea posible.</li>
<li>Lectores de pantalla (NVDA, JAWS, VoiceOver)</li>
<li>'''Inspección del código''': verificar que las sugerencias están presentes en texto junto al campo correspondiente y correctamente asociadas mediante <code>aria-describedby</code> cuando proceda.</li>
<li>DevTools → asociaciones ARIA</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) confirmar que las sugerencias se leen automáticamente al aparecer el error y que el usuario entiende cómo solucionarlo.</li>
<li>Axe / Lighthouse *</li>
<li>'''Revisión de seguridad''': asegurar que la sugerencia no revela información sensible ni compromete la seguridad (p. ej., no mostrar datos reales previamente introducidos).</li>
</ul>
</ul>
}}
}}

Revisión actual - 12:51 6 nov 2025

3.3.3-A. Sugerencias ante errores

Discapacidades afectadas

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

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • Al detectar automáticamente un error cuando los usuarios introducen datos se proporcionan sugerencias para hacer la corrección, siempre que sea posible se debe proporcionar dicha sugerencia y esto no debe comprometer la seguridad o la finalidad del contenido.

Comprensión del criterio

Descripción resumida

Cuando un formulario detecta un error, debe ofrecer instrucciones claras para corregirlo, siempre que ello sea seguro y no revele información sensible.

Objetivo

Asegurar, siempre que sea posible, que los usuarios reciben sugerencias adecuadas para corregir errores al introducir datos, facilitando el éxito en tareas de formularios.

Importancia de cumplir el criterio

Las personas con dificultades cognitivas, usuarios con baja visión, lectores de pantalla o usuarios con menor alfabetización digital pueden tener dificultades para corregir errores sin orientación clara. Sugerencias específicas reducen barreras y frustración.

Referencias WCAG

Recursos de apoyo

Consejos
  • Mensajes de error con instrucciones específicas
  • Ejemplos claros del formato requerido
  • Validación accesible en cliente o servidor

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 introduciendo valores erróneos en los campos.
  3. Paso 3. Cuando la información proporcionada por el usuario sea incorrecta pero sea posible conocer un valor correcto sugerido, comprobar si la página ofrece un texto con la corrección.

Resultado esperado

Se proporcionan sugerencias útiles para corregir errores sin comprometer seguridad o privacidad, cuando es posible.

Ejemplo

Sugerencia clara unida al campo (aria-describedby="email-error" y id="email-error") 

<label for="email">Correo electrónico</label>
<input id="email" type="email" aria-describedby="email-error" aria-invalid="true">
<p id="email-error" class="error" role="alert">
  El formato no es válido. Prueba algo como nombre@ejemplo.com
</p>

Otras herramientas de evaluación

  • Prueba funcional: introducir datos incorrectos (p. ej., email sin “@”, número fuera de rango, formato de fecha erróneo) y comprobar que se ofrece una sugerencia clara y accesible para corregirlo cuando sea posible.
  • Inspección del código: verificar que las sugerencias están presentes en texto junto al campo correspondiente y correctamente asociadas mediante aria-describedby cuando proceda.
  • Lectores de pantalla: (NVDA, JAWS, VoiceOver) confirmar que las sugerencias se leen automáticamente al aparecer el error y que el usuario entiende cómo solucionarlo.
  • Revisión de seguridad: asegurar que la sugerencia no revela información sensible ni compromete la seguridad (p. ej., no mostrar datos reales previamente introducidos).










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 3.3.3-A. Sugerencias ante errores

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_3/3.3_Assistencia_en_los_input/3.3.3-A&oldid=3742»