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

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-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_Assistencia_en_los_input
<article class="wcag-card">
|wcag_pauta_url=Principio_3/3.3_Assistencia_en_los_input
  <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/WCAG21/Techniques/general/G84 G84: Providing a text description when the user provides information that is not in the list of allowed values]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G85 G85: Providing a text description when user input falls outside the required format or values]</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>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR32 SCR32: Providing client-side validation and adding error text via the DOM]</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>
</ul>
 
|wcag_recursos=
<ul>
<li>[https://www.w3.org/WAI/tutorials/forms/notifications/ User Notification]</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 describen mediante texto claro vinculado al campo correspondiente.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
Se muestra el error claro y asociado al campo de texto donde se ha producido.
<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>'''Prueba funcional''': introducir datos incorrectos en campos del formulario (p. ej., email inválido, número fuera de rango, formato incorrecto) y comprobar que aparece un mensaje de error textual claro indicando el problema y cómo corregirlo.</li>
<li>'''Inspección del código''': verificar que los mensajes están asociados correctamente a cada campo (p. ej., mediante <code>aria-describedby</code>), y que se usan las propiedades nativas (p. ej. <code>type="email"</code>, <code>min</code>, <code>max</code>, <code>pattern</code>) junto con texto explicativo entendible.</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) confirmar que los errores se anuncian cuando aparecen y que el usuario entiende qué dato es inválido y cómo corregirlo.</li>
<li>'''Revisión visual''': comprobar que la notificación del error no depende únicamente del color y que el texto describe específicamente la causa y la solución (p. ej., “Introduce un correo válido con el formato nombre@dominio.com”).</li>
</ul>
}}

Revisión actual - 12:50 6 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

  • Understanding Success Criterion 3.3.1

    • Recursos de apoyo

    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 describen mediante texto claro vinculado al campo correspondiente.

    Ejemplo

    Se muestra el error claro y asociado al campo de texto donde se ha producido. 

    <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

    • Prueba funcional: introducir datos incorrectos en campos del formulario (p. ej., email inválido, número fuera de rango, formato incorrecto) y comprobar que aparece un mensaje de error textual claro indicando el problema y cómo corregirlo.
    • Inspección del código: verificar que los mensajes están asociados correctamente a cada campo (p. ej., mediante aria-describedby), y que se usan las propiedades nativas (p. ej. type="email", min, max, pattern) junto con texto explicativo entendible.
    • Lectores de pantalla: (NVDA, JAWS, VoiceOver) confirmar que los errores se anuncian cuando aparecen y que el usuario entiende qué dato es inválido y cómo corregirlo.
    • Revisión visual: comprobar que la notificación del error no depende únicamente del color y que el texto describe específicamente la causa y la solución (p. ej., “Introduce un correo válido con el formato nombre@dominio.com”).










    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...




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