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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 2 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''3.3.1-A. Identificación de errores''' ==
{{CriterioWCAG
<!-- Análisis interno:
|id_wcag_criterio=3.3.1
Este criterio impacta principalmente a:
|id_wcag_subcriterio=3.3.1-A
- Personas con discapacidad cognitiva (dificultades de comprensión o memoria)
|wcag_titulo_criterio=3.3.1-A. Identificación de errores
- Personas con baja visión (dificultades para percibir cambios visuales sutiles)
|wcag_nivel=A
Problema grave: Si los errores de los formularios no se identifican o explican claramente, los usuarios no comprenden qué deben corregir, impidiéndoles completar tareas esenciales.
|wcag_version=2.0
Gravedad: Barrera grave para la comprensión y la interacción con formularios.
|wcag_principio=3_Comprensible
-->
|wcag_principio_url=Principio_3
<html>
|wcag_pauta=3.3_Assistencia_en_los_input
<!-- criterio 3.3.1-A -->
|wcag_pauta_url=Principio_3/3.3_Assistencia_en_los_input
<article class="wcag-card">
|wcag_grupo=Formularios
  <section class="wcag-info">
|wcag_subgrupo=Errores
    <ul>
|wcag_subcriterio_url=Principio_3/3.3_Asistencia_en_la_entrada/3.3.1-A
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
      <li><span class="label">Principio:</span><span class="value">3. Comprensible</span></li>
      <li><span class="label">Pauta:</span><span class="value">3.3 Asistencia a la entrada de datos</span></li>
      <li><span class="label">Categoría:</span><span class="value">Formularios</span></li>
      <li><span class="label">Subcategoría:</span><span class="value">Identificación de errores</span></li>
    </ul>
  </section>


   <section class="wcag-users">
|wcag_discapacidades=
    <p>Usuarios más afectados</p>
<li class="discapacidad-item">
    <ul>
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
      <li>
   <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
        <img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" />
  <span class="gravedad gravedad-grave">Barrera grave</span>
        Personas con discapacidad cognitiva – <span class="gravedad">Barrera grave</span>
</li>
      </li>
<li class="discapacidad-item">
      <li>
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
        <img src="/images/b/b7/Bajavision.png" alt="Icono baja visión" class="icono-discapacidad" />
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual baja|Baja visión]]</span> –
        Personas con baja visión – <span class="gravedad">Barrera moderada</span>
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
      </li>
</li>
    </ul>
<li class="discapacidad-item">
  </section>
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
</article>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
</html>
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad visual total]]
 
 
|wcag_texto_criterioOAW=
Se deben identificar los campos de formulario obligatorios que no han sido completados y se debe informar a los usuarios mediante un texto.
 
|wcag_descripcion_resumida=
Indicar claramente qué campo contiene un error y el motivo del error mediante texto visible.
 
|wcag_objetivo=
Garantizar que los usuarios detecten los errores y puedan corregirlos sin perder información ni contexto.
 
|wcag_importancia=
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.
 
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G83 G83: Providing text descriptions to identify required fields that were not completed]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR18 SCR18: Providing client-side validation and alert]</span></li>
</ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html Understanding Success Criterion 3.3.1]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/quickref/#error-identification WCAG Quick Reference]</span></li>
</ul>
 
|wcag_recursos=
<strong> Consejos </strong>
 
<ul>
<li>Mensajes de error claros y visibles</li>
<li>Asociación mediante <code>aria-describedby</code></li>
<li>Uso adecuado de <code>aria-invalid</code>
</ul>
<ul>
<li><span lang="en">[https://www.w3.org/WAI/tutorials/forms/validation/ Validating Input — W3C/WAI Forms Tutorial]</span></li>
</ul>
 
|wcag_tipo_evaluacion=Manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Localizar los formularios existentes.
</li>
 
<li><span class="paso-badge">Paso 2.</span>
Intentar enviar el formulario sin haber completado los campos obligatorios.
</li>
 
<li><span class="paso-badge">Paso 3.</span>
Verificar que se informa a los usuarios mediante texto de qué campos obligatorios faltan por completar.
</li>
</ol>
 
 
|wcag_resultado_evaluacion=
Los errores se identifican mediante texto y están asociados al campo correspondiente, facilitando su corrección.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
Error textual vinculado al campo.
<pre class="wcag-codigo-html">
<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>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>'''Prueba funcional''': intentar enviar el formulario sin completar los campos obligatorios y comprobar que aparece un mensaje de error textual indicando qué campo falta.</li>
<li>'''Inspección del código''': verificar uso correcto de <code>required</code> o <code>aria-required="true"</code> y que los mensajes de error están asociados al campo mediante <code>aria-describedby</code> u otro mecanismo adecuado.</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) confirmar que el mensaje se anuncia automáticamente y que el usuario entiende qué campo debe corregir.</li>
<li>'''Revisión visual''': comprobar que la identificación del error no depende solo del color; debe haber texto claro explicando el problema.</li>
</ul>
}}

Revisión actual - 12:50 6 nov 2025

3.3.1-A. Identificación de 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)

  • 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

  • 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

    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 ilustrativo

    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.










    Ejemplos accesibles y no accesibles creados por alumnos

     Última modificación
    2526UFV3.3.1‑A-00111 enero 2026 18:43:10


    Comentarios

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

    Loading comments...




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