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 37: Línea 37:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G89 G89: Providing expected data format and example]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G184 G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input]</span></li>
<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/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>
</ul>


|wcag_recursos=
|wcag_recursos=
<ul>
<ul>
<li>Patrones de formularios accesibles</li>
<li>[https://www.w3.org/WAI/tutorials/forms/instructions/ Form Instructions]
<li>Instrucciones junto al campo o agrupadas con <code>fieldset</code> y <code>legend</code></li>
</li>
<li>Uso de <code>aria-describedby</code> para asociar ejemplos e instrucciones</li>
</ul>
</ul>


Línea 54: Línea 52:
|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<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 1.</span>
<li><span class="paso-badge">Paso 2.</span> Verificar que se proporcionan instrucciones visibles antes de la entrada.</li>
Localizar los formularios existentes.
<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>
<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>
<li><span class="paso-badge">Paso 2.</span>
En los campos que requieran un formato o valor determinados, verificar que existen instrucciones textuales claras que indiquen cómo rellenar los campos con el formato requerido.
</li>
</ol>
</ol>


Línea 66: Línea 66:
|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
<strong>✅ Ejemplo accesible: instrucciones claras vinculadas al campo</strong>
Instrucciones claras vinculadas al campo
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<label for="fecha">Fecha de nacimiento</label>
<label for="fecha">Fecha de nacimiento</label>
Línea 74: Línea 74:
</div>
</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=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>DevTools → panel de accesibilidad para asociaciones</li>
<li>'''Inspección visual''': comprobar que el formulario incluye instrucciones claras sobre cómo introducir los datos (formato, unidades, longitud, valores permitidos, ejemplos si procede), ya sea en la etiqueta del campo, junto a él o al inicio del formulario/grupo.</li>
<li>Lectores de pantalla (NVDA, JAWS, VoiceOver)</li>
<li>'''Inspección del código''': verificar que las instrucciones están presentes en texto y no dependen solo de atributos técnicos como <code>pattern</code> o mensajes emergentes del navegador.</li>
<li>Validación parcial con Axe / Lighthouse</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) confirmar que las instrucciones se leen en orden lógico y están asociadas al campo cuando corresponde (p. ej. mediante <code>aria-describedby</code>).</li>
<li>Prueba con zoom 200–400% y móviles</li>
<li>'''Prueba funcional''': intentar cumplimentar el formulario sin conocer los requisitos previamente y comprobar que las instrucciones visibles y accesibles ayudan a introducir los datos correctamente.</li>
</ul>
</ul>
}}
}}

Revisión del 07:06 6 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

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. En los campos que requieran un formato o valor determinados, verificar que existen instrucciones textuales claras que indiquen cómo rellenar los campos con el formato requerido.

Resultado esperado

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

Ejemplo

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>

Otras herramientas de evaluación

  • Inspección visual: comprobar que el formulario incluye instrucciones claras sobre cómo introducir los datos (formato, unidades, longitud, valores permitidos, ejemplos si procede), ya sea en la etiqueta del campo, junto a él o al inicio del formulario/grupo.
  • Inspección del código: verificar que las instrucciones están presentes en texto y no dependen solo de atributos técnicos como pattern o mensajes emergentes del navegador.
  • Lectores de pantalla: (NVDA, JAWS, VoiceOver) confirmar que las instrucciones se leen en orden lógico y están asociadas al campo cuando corresponde (p. ej. mediante aria-describedby).
  • Prueba funcional: intentar cumplimentar el formulario sin conocer los requisitos previamente y comprobar que las instrucciones visibles y accesibles ayudan a introducir los datos correctamente.










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