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

De WCAG Wiki
Sin resumen de edición
Sin resumen de edición
Línea 1: Línea 1:
== '''3.3.1-B. Descripción de errores''' ==
{{CriterioWCAG
<!-- Análisis interno:
|id_wcag_criterio=3.3.1
Impacto principal:
|id_wcag_subcriterio=3.3.1-B
- Personas con discapacidad cognitiva: dificultades para interpretar mensajes de error no textuales o poco claros.
|wcag_titulo_criterio=3.3.1-B. Descripción de errores
- Personas con discapacidad visual: si el error solo se muestra visualmente (color o icono), no será percibido.
|wcag_nivel=A
Gravedad: Barrera grave, ya que impide completar formularios correctamente.
|wcag_version=2.0
-->
|wcag_principio=3_Comprensible
<html>
|wcag_principio_url=Principio_3
<!-- criterio 3.3.1-B -->
|wcag_pauta=3.3_Asistencia_en_la_entrada
<article class="wcag-card">
|wcag_pauta_url=Principio_3/3.3_Asistencia_en_la_entrada
  <section class="wcag-info">
|wcag_grupo=Formularios
    <ul>
|wcag_subgrupo=Errores
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
|wcag_subcriterio_url=Principio_3/3.3_Asistencia_en_la_entrada/3.3.1-B
      <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">Descripció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:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
        <img src="/images/4/4d/Sinvision.png" alt="Icono discapacidad visual total" class="icono-discapacidad" />
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
        Personas con discapacidad visual total – <span class="gravedad">Barrera grave</span>
  <span class="gravedad gravedad-grave">Barrera grave</span>
      </li>
</li>
    </ul>
 
  </section>
|wcag_lista_discapacidades=
</article>
[[Categoría:Discapacidad cognitiva]]
</html>
[[Categoría:Discapacidad visual total]]
 
|wcag_texto_criterioOAW=
Se deben proporcionar descripciones textuales de los errores cuando los usuarios introducen datos en un formulario que no cumplen un formato o valor determinado, o no están entre los valores permitidos.
 
|wcag_descripcion_resumida=
Cuando un dato introducido es incorrecto o inválido, se debe informar mediante un mensaje textual claro que explique el problema al usuario.
 
|wcag_objetivo=
Asegurar que las personas entienden qué error se ha producido y cómo corregirlo, especialmente en formularios que requieren formatos específicos.
 
|wcag_importancia=
Sin mensajes claros, las personas con discapacidad visual, cognitiva o lector de pantalla pueden no entender por qué no pueden enviar el formulario.
 
|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://webaim.org/techniques/forms/ WebAIM — Accessible Forms]</li>
<li>[https://www.w3.org/TR/WAI-ARIA-1.2/#aria-invalid WAI-ARIA — aria-invalid]</li>
</ul>
 
|wcag_recursos=
<ul>
<li>Mensaje textual junto al campo</li>
<li><code>aria-describedby</code> para asociar error al campo</li>
<li><code>aria-invalid="true"</code></li>
<li>Mensajes rol="alert"</li>
</ul>
 
|wcag_tipo_evaluacion=Manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li>Introducir valores erróneos</li>
<li>Verificar mensaje textual claro</li>
<li>Confirmar vínculo al input (<code>aria-describedby</code>)</li>
<li>Verificar anuncio con lector de pantalla</li>
</ol>
 
|wcag_resultado_evaluacion=
Los errores se describen mediante texto claro vinculado al campo correspondiente.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<strong>✅ Ejemplo accesible: error claro y asociado</strong>
<pre class="wcag-codigo-html">
<label for="telefono">Teléfono (9 dígitos)</label>
<input id="telefono" aria-describedby="tel-error" aria-invalid="true">
<p id="tel-error" role="alert">El número debe tener 9 dígitos.</p>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>NVDA/JAWS/VoiceOver</li>
<li>DevTools accesibilidad</li>
<li>Lighthouse / Axe</li>
</ul>
}}

Revisión del 12:56 5 nov 2025

3.3.1-B. Descripció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 proporcionar descripciones textuales de los errores cuando los usuarios introducen datos en un formulario que no cumplen un formato o valor determinado, o no están entre los valores permitidos.

Comprensión del criterio

Descripción resumida

Cuando un dato introducido es incorrecto o inválido, se debe informar mediante un mensaje textual claro que explique el problema al usuario.

Objetivo

Asegurar que las personas entienden qué error se ha producido y cómo corregirlo, especialmente en formularios que requieren formatos específicos.

Importancia de cumplir el criterio

Sin mensajes claros, las personas con discapacidad visual, cognitiva o lector de pantalla pueden no entender por qué no pueden enviar el formulario.

Referencias WCAG

Recursos de apoyo

  • Mensaje textual junto al campo
  • aria-describedby para asociar error al campo
  • aria-invalid="true"
  • Mensajes rol="alert"

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Introducir valores erróneos
  2. Verificar mensaje textual claro
  3. Confirmar vínculo al input (aria-describedby)
  4. Verificar anuncio con lector de pantalla

Resultado esperado

Los errores se describen mediante texto claro vinculado al campo correspondiente.

Ejemplo

✅ Ejemplo accesible: error claro y asociado

<label for="telefono">Teléfono (9 dígitos)</label>
<input id="telefono" aria-describedby="tel-error" aria-invalid="true">
<p id="tel-error" role="alert">El número debe tener 9 dígitos.</p>

Otras herramientas de evaluación

  • NVDA/JAWS/VoiceOver
  • DevTools accesibilidad
  • Lighthouse / Axe










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

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

Loading comments...