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

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
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_Asistencia_en_la_entrada
<!-- criterio 3.3.1-A -->
|wcag_pauta_url=Principio_3/3.3_Asistencia_en_la_entrada
<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>
 
  </section>
|wcag_lista_discapacidades=
</article>
[[Categoría:Discapacidad cognitiva]]
</html>
[[Categoría:Discapacidad visual baja]]
 
|wcag_texto_criterioOAW=
Se deben identificar los campos de formulario obligatorios que no hayan sido completados y se debe informar a los usuarios mediante un texto que indique dónde se ha producido el error y qué se necesita corregir.
 
|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/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>
<li>[https://www.w3.org/TR/WAI-ARIA-1.2/#aria-invalid ARIA – aria-invalid]</li>
<li>[https://webaim.org/techniques/forms/ WebAIM — Accessible Forms]</li>
</ul>
 
|wcag_recursos=
<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>
 
|wcag_tipo_evaluacion=Manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Enviar formulario con errores o campos vacíos.</li>
<li><span class="paso-badge">Paso 2.</span> Verificar que aparece mensaje textual claro.</li>
<li><span class="paso-badge">Paso 3.</span> Confirmar que el mensaje identifica el campo y el error.</li>
<li><span class="paso-badge">Paso 4.</span> Revisar presencia de <code>aria-invalid</code> y vínculos mediante <code>aria-describedby</code>.</li>
<li><span class="paso-badge">Paso 5.</span> Comprobar anuncio en lectores de pantalla.</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">
<strong>✅ Accesible: error textual vinculado al campo</strong>
<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 con teclado</li>
<li>NVDA / JAWS / VoiceOver</li>
<li>DevTools – Propiedades accesibles</li>
<li>Axe / Lighthouse (detección parcial)</li>
</ul>
}}

Revisión del 12:55 5 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 hayan sido completados y se debe informar a los usuarios mediante un texto que indique dónde se ha producido el error y qué se necesita corregir.

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

Recursos de apoyo

  • 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. Enviar formulario con errores o campos vacíos.
  2. Paso 2. Verificar que aparece mensaje textual claro.
  3. Paso 3. Confirmar que el mensaje identifica el campo y el error.
  4. Paso 4. Revisar presencia de aria-invalid y vínculos mediante aria-describedby.
  5. Paso 5. Comprobar anuncio en lectores de pantalla.

Resultado esperado

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

Ejemplo

✅ Accesible: 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 con teclado
  • NVDA / JAWS / VoiceOver
  • DevTools – Propiedades accesibles
  • Axe / Lighthouse (detección parcial)










Ejemplos accesibles y no accesibles creados por alumnos

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=3489»