Diferencia entre revisiones de «Principio 3/3.3 Assistencia en los input/3.3.2-D»

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.2-D. Instrucciones de cumplimentación''' ==
{{CriterioWCAG
|id_wcag_criterio=3.3.2
|id_wcag_subcriterio=3.3.2-D
|wcag_titulo_criterio=3.3.2-D. Instrucciones de cumplimentación
|wcag_nivel=A
|wcag_version=2.0
|wcag_principio=3_Comprensible
|wcag_principio_url=Principio_3
|wcag_pauta=3.3_Asistencia_en_la_entrada
|wcag_pauta_url=Principio_3/3.3_Asistencia_en_la_entrada
|wcag_grupo=Formularios
|wcag_subgrupo=Instrucciones
|wcag_subcriterio_url=Principio_3/3.3_Asistencia_en_la_entrada/3.3.2-D


<!-- Análisis interno: Este criterio impacta principalmente a: Personas con discapacidad cognitiva. Problema grave: Si no se proporcionan instrucciones claras, los usuarios pueden cometer errores al introducir datos (formato, tipo, longitud). Gravedad: Barrera grave, ya que puede impedir completar procesos importantes como formularios legales o de pago. -->
|wcag_discapacidades=
<li class="discapacidad-item">
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>


<!-- criterio 3.3.2-D -->
|wcag_lista_discapacidades=
<html>
[[Categoría:Discapacidad cognitiva]]
<article class="wcag-card">
  <section class="wcag-info">
    <ul>
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
      <li><span class="label">Versión:</span><span class="value">2.1</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">Instrucciones de cumplimentación</span></li>
    </ul>
  </section>


  <section class="wcag-users">
|wcag_texto_criterioOAW=
    <p>Usuarios más afectados</p>
En los formularios se deben proporcionar las instrucciones textuales necesarias para cumplimentar los datos de forma satisfactoria describiendo los requisitos a cumplir en cuanto a formato o valor, bien en cada campo (por ejemplo, en su etiqueta) o bien al inicio del formulario o del grupo de campos de formulario, y proporcionando un ejemplo cuando sea apropiado.
    <ul>
 
      <li><img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" /> Personas con discapacidad cognitiva – <span class="gravedad">Barrera grave</span></li>
|wcag_descripcion_resumida=
    </ul>
Los formularios deben ofrecer instrucciones claras sobre cómo introducir los datos (formato, valor, ejemplo) antes de que el usuario escriba.
  </section>
 
</article>
|wcag_objetivo=
</html>
Ayudar a los usuarios a completar correctamente los formularios, reduciendo errores derivados de la falta de información sobre formatos o requisitos.
 
|wcag_importancia=
Las personas con dificultades cognitivas, usuarios que emplean tecnologías de apoyo o quienes no están familiarizados con ciertos formatos pueden cometer errores si no se proporcionan instrucciones claras y visibles.
 
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html Understanding Success Criterion 3.3.2: Labels or Instructions]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/quickref/#labels-or-instructions WCAG Quick Reference – 3.3.2]</span></li>
<li>[https://webaim.org/techniques/forms/ WebAIM — Accessible Forms]</li>
<li>[https://design-system.service.gov.uk/components/text-input/ GOV.UK — Form guidance]</li>
</ul>
 
|wcag_recursos=
<ul>
<li>Patrones de formularios accesibles</li>
<li>Instrucciones junto al campo o agrupadas con <code>fieldset</code> y <code>legend</code></li>
<li>Uso de <code>aria-describedby</code> para asociar ejemplos e instrucciones</li>
</ul>
 
|wcag_tipo_evaluacion=Manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Identificar formularios y campos con requisitos de formato o valores específicos.</li>
<li><span class="paso-badge">Paso 2.</span> Verificar que se proporcionan instrucciones visibles antes de la entrada.</li>
<li><span class="paso-badge">Paso 3.</span> Confirmar que, si hay ejemplos, están asociados semánticamente (<code>aria-describedby</code> cuando necesario).</li>
<li><span class="paso-badge">Paso 4.</span> Validar claridad en dispositivos móviles y pantallas pequeñas.</li>
<li><span class="paso-badge">Paso 5.</span> Probar con lector de pantalla.</li>
</ol>
 
|wcag_resultado_evaluacion=
El usuario encuentra instrucciones claras y ejemplos útiles que explican cómo cumplimentar correctamente cada campo antes de introducir los datos.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<strong>✅ Ejemplo accesible: instrucciones claras vinculadas al campo</strong>
<pre class="wcag-codigo-html">
<label for="fecha">Fecha de nacimiento</label>
<input id="fecha" name="fecha" aria-describedby="fecha-ayuda">
<p id="fecha-ayuda" class="hint">Formato: dd/mm/aaaa. Ejemplo: 27/05/1998</p>
</pre>
</div>
 
<div class="accessibility-card">
<strong>✅ Instrucción al inicio del formulario + ejemplos</strong>
<pre class="wcag-codigo-html">
<p>Introduce tus datos personales. Los campos con formato incluyen un ejemplo.</p>
 
<label for="codigo">Código de cliente</label>
<input id="codigo" aria-describedby="codigo-ayuda">
<p id="codigo-ayuda" class="hint">Formato: AAA-9999. Ejemplo: ABC-1234</p>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>DevTools → panel de accesibilidad para asociaciones</li>
<li>Lectores de pantalla (NVDA, JAWS, VoiceOver)</li>
<li>Validación parcial con Axe / Lighthouse</li>
<li>Prueba con zoom 200–400% y móviles</li>
</ul>
}}

Revisión del 13:03 5 nov 2025

3.3.2-D. Instrucciones de cumplimentación

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)

  • En los formularios se deben proporcionar las instrucciones textuales necesarias para cumplimentar los datos de forma satisfactoria describiendo los requisitos a cumplir en cuanto a formato o valor, bien en cada campo (por ejemplo, en su etiqueta) o bien al inicio del formulario o del grupo de campos de formulario, y proporcionando un ejemplo cuando sea apropiado.

Comprensión del criterio

Descripción resumida

Los formularios deben ofrecer instrucciones claras sobre cómo introducir los datos (formato, valor, ejemplo) antes de que el usuario escriba.

Objetivo

Ayudar a los usuarios a completar correctamente los formularios, reduciendo errores derivados de la falta de información sobre formatos o requisitos.

Importancia de cumplir el criterio

Las personas con dificultades cognitivas, usuarios que emplean tecnologías de apoyo o quienes no están familiarizados con ciertos formatos pueden cometer errores si no se proporcionan instrucciones claras y visibles.

Referencias WCAG

Recursos de apoyo

  • Patrones de formularios accesibles
  • Instrucciones junto al campo o agrupadas con fieldset y legend
  • Uso de aria-describedby para asociar ejemplos e instrucciones

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Identificar formularios y campos con requisitos de formato o valores específicos.
  2. Paso 2. Verificar que se proporcionan instrucciones visibles antes de la entrada.
  3. Paso 3. Confirmar que, si hay ejemplos, están asociados semánticamente (aria-describedby cuando necesario).
  4. Paso 4. Validar claridad en dispositivos móviles y pantallas pequeñas.
  5. Paso 5. Probar con lector de pantalla.

Resultado esperado

El usuario encuentra instrucciones claras y ejemplos útiles que explican cómo cumplimentar correctamente cada campo antes de introducir los datos.

Ejemplo

✅ Ejemplo accesible: instrucciones claras vinculadas al campo 

<label for="fecha">Fecha de nacimiento</label>
<input id="fecha" name="fecha" aria-describedby="fecha-ayuda">
<p id="fecha-ayuda" class="hint">Formato: dd/mm/aaaa. Ejemplo: 27/05/1998</p>

✅ Instrucción al inicio del formulario + ejemplos 

<p>Introduce tus datos personales. Los campos con formato incluyen un ejemplo.</p>

<label for="codigo">Código de cliente</label>
<input id="codigo" aria-describedby="codigo-ayuda">
<p id="codigo-ayuda" class="hint">Formato: AAA-9999. Ejemplo: ABC-1234</p>

Otras herramientas de evaluación

  • DevTools → panel de accesibilidad para asociaciones
  • Lectores de pantalla (NVDA, JAWS, VoiceOver)
  • Validación parcial con Axe / Lighthouse
  • Prueba con zoom 200–400% y móviles










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 3.3.2-D. Instrucciones de cumplimentación

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_3/3.3_Assistencia_en_los_input/3.3.2-D&oldid=3494»