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

De WCAG Wiki
Sin resumen de edición
Sin resumen de edición
Línea 28: Línea 28:
[[Categoría:Baja visión]]
[[Categoría:Baja visión]]
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad cognitiva]]
}}
}}
|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
Se deben proporcionar etiquetas visibles y descriptivas para los campos de formulario y para los grupos de campos de formulario.
Se deben proporcionar etiquetas visibles y descriptivas para los campos de formulario y grupos de campos de formulario
 
|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Todo campo de formulario debe tener una etiqueta textual visible que indique claramente qué se espera introducir.
Todo campo de formulario debe tener una etiqueta textual visible que indique claramente qué se espera introducir.
|wcag_objetivo=
|wcag_objetivo=
Evitar que los usuarios cometan errores al introducir datos, proporcionando instrucciones y etiquetas claras que describan el propósito de cada campo.
Evitar que los usuarios cometan errores al introducir datos, proporcionando instrucciones y etiquetas claras que describan el propósito de cada campo.
|wcag_importancia=
|wcag_importancia=
Las personas con discapacidad visual parcial, dificultades cognitivas, lectores de pantalla o usuarios novatos pueden confundirse si no hay etiquetas claras. Las etiquetas visibles mejoran la usabilidad y la precisión al completar formularios.
Las personas con discapacidad visual parcial, dificultades cognitivas, lectores de pantalla o usuarios sin experiencia pueden confundirse si no hay etiquetas claras. Las etiquetas visibles mejoran la usabilidad y la precisión al completar formularios.
 
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G131 G131: Providing descriptive labels]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H44 H44: Using label elements to associate text labels with form controls]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H71 H71: Providing a description for groups of form controls using fieldset and legend elements]</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><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://webaim.org/techniques/forms/ WebAIM — Accessible Forms]</li>
<li>[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label MDN — label element]</li>
 
</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>
<li>Asociación de etiquetas mediante <code>&lt;label for&gt;</code></li>
<li>Texto auxiliar claro (<code>aria-describedby</code> cuando necesario)</li>
</ul>
</ul>
|wcag_tipo_evaluacion=Manual
|wcag_tipo_evaluacion=Manual
|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Localizar todos los campos de formulario y grupos de campos.</li>
<li><span class="paso-badge">Paso 1.</span>
<li><span class="paso-badge">Paso 2.</span> Verificar que cada uno tiene una etiqueta textual visible.</li>
Localizar los formularios existentes.
<li><span class="paso-badge">Paso 3.</span> Confirmar que la etiqueta describe el propósito del campo claramente.</li>
</li>
<li><span class="paso-badge">Paso 4.</span> Revisar asociación semántica (<code>label for</code> o <code>aria-labelledby</code>).</li>
 
<li><span class="paso-badge">Paso 5.</span> Probar lectura con lector de pantalla.</li>
<li><span class="paso-badge">Paso 2.</span>
Verificar que existen etiquetas visibles y descriptivas para los campos de formulario.
</li>
 
<li><span class="paso-badge">Paso 3.</span>
Si existen campos de formulario relacionados entre sí, verificar que se encuentran agrupados y adecuadamente descritos.
</li>
</ol>
</ol>
|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Todos los campos y grupos de campos disponen de etiquetas visibles y descriptivas que permiten entender qué información debe introducirse.
Todos los campos y grupos de campos disponen de etiquetas visibles y descriptivas que permiten entender qué información debe introducirse.
|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
<strong>✅ Ejemplo accesible: etiqueta clara y visible</strong>
Etiqueta clara y visible.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<form>
<form>
Línea 72: Línea 89:
</div>
</div>


<div class="accessibility-card">
<strong>✅ Etiqueta + ayuda adicional</strong>
<pre class="wcag-codigo-html">
<label for="dni">DNI (8 números + letra)</label>
<input id="dni" name="dni" aria-describedby="dni-ayuda">
<p id="dni-ayuda" class="hint">Ejemplo: 12345678A</p>
</pre>
</div>


<div class="accessibility-card">
<strong>✅ Grupo de campos con leyenda</strong>
<pre class="wcag-codigo-html">
<fieldset>
  <legend>Datos de contacto</legend>
  <label for="correo">Correo electrónico</label>
  <input id="correo" name="correo">
  <label for="telefono">Teléfono</label>
  <input id="telefono" name="telefono">
</fieldset>
</pre>
</div>
|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Inspección de elementos (<code>label</code>, <code>for</code>, <code>aria-labelledby</code>)</li>
<li>'''Inspección visual''': comprobar que cada campo y grupo de campos del formulario tiene una etiqueta visible que describe claramente su propósito; evitar depender solo de placeholders.</li>
<li>Lectores de pantalla (NVDA, JAWS, VoiceOver)</li>
<li>'''Inspección del código''': verificar que las etiquetas están correctamente asociadas a los controles mediante <code>&lt;label for=""&gt;</code> y <code>id</code>, o con <code>aria-labelledby</code> en casos necesarios; para grupos, comprobar uso de <code>&lt;fieldset&gt;</code> y <code>&lt;legend&gt;</code>.</li>
<li>Validación con Axe/Lighthouse (detección parcial)</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) navegar por los campos y confirmar que las etiquetas se anuncian claramente y corresponden al texto visible.</li>
<li>Pruebas de usuario con navegación por teclado</li>
<li>'''Prueba funcional''': asegurarse de que las etiquetas permanecen visibles en todo momento, incluso después de interactuar con los campos, y no desaparecen al escribir.</li>
</ul>
</ul>
}}

Revisión del 06:44 6 nov 2025

3.3.2-A. Etiquetas visibles

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)

  • {{{wcag_texto_criterioOAW}}}

Comprensión del criterio

Descripción resumida

{{{wcag_descripcion_resumida}}}

Objetivo

{{{wcag_objetivo}}}

Importancia de cumplir el criterio

{{{wcag_importancia}}}

Referencias WCAG

{{{wcag_referencias}}}

Recursos de apoyo

{{{wcag_recursos}}}

Evaluación del criterio

Tipo de evaluación

Evaluación [[:Categoría:{{{wcag_tipo_evaluacion}}}|{{{wcag_tipo_evaluacion}}}]]

Procedimiento de evaluación

{{{wcag_pasos_evaluacion}}}

Resultado esperado

{{{wcag_resultado_evaluacion}}}

Ejemplo

{{{wcag_ejemplo_evaluacion}}}

Otras herramientas de evaluación

{{{wcag_otras_herramientas_evaluacion}}}








La propiedad «Wcag tipo evaluacion» (como tipo de página) con el valor de entrada «{{{wcag_tipo_evaluacion}}}» contiene caracteres inválidos o está incompleto, por lo que puede causar resultados inesperados durante una consulta o proceso de anotación.


Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 3.3.2-A. Etiquetas visibles

Loading comments...




|wcag_texto_criterioOAW= Se deben proporcionar etiquetas visibles y descriptivas para los campos de formulario y grupos de campos de formulario

|wcag_descripcion_resumida= Todo campo de formulario debe tener una etiqueta textual visible que indique claramente qué se espera introducir.

|wcag_objetivo= Evitar que los usuarios cometan errores al introducir datos, proporcionando instrucciones y etiquetas claras que describan el propósito de cada campo.

|wcag_importancia= Las personas con discapacidad visual parcial, dificultades cognitivas, lectores de pantalla o usuarios sin experiencia pueden confundirse si no hay etiquetas claras. Las etiquetas visibles mejoran la usabilidad y la precisión al completar formularios.

|wcag_referencias=

  • G131: Providing descriptive labels
  • H44: Using label elements to associate text labels with form controls
  • H71: Providing a description for groups of form controls using fieldset and legend elements
  • Understanding Success Criterion 3.3.2: Labels or Instructions
  • WCAG Quick Reference – 3.3.2
  • WebAIM — Accessible Forms
  • |wcag_recursos=

    |wcag_tipo_evaluacion=Manual |wcag_pasos_evaluacion=

    1. Paso 1. Localizar los formularios existentes.
    2. Paso 2. Verificar que existen etiquetas visibles y descriptivas para los campos de formulario.
    3. Paso 3. Si existen campos de formulario relacionados entre sí, verificar que se encuentran agrupados y adecuadamente descritos.


    |wcag_resultado_evaluacion= Todos los campos y grupos de campos disponen de etiquetas visibles y descriptivas que permiten entender qué información debe introducirse.

    |wcag_ejemplo_evaluacion=

    Etiqueta clara y visible.

    <form>
      <label for="nombre">Nombre completo</label>
      <input id="nombre" name="nombre" type="text">
    </form>
    


    |wcag_otras_herramientas_evaluacion=

    • Inspección visual: comprobar que cada campo y grupo de campos del formulario tiene una etiqueta visible que describe claramente su propósito; evitar depender solo de placeholders.
    • Inspección del código: verificar que las etiquetas están correctamente asociadas a los controles mediante <label for=""> y id, o con aria-labelledby en casos necesarios; para grupos, comprobar uso de <fieldset> y <legend>.
    • Lectores de pantalla: (NVDA, JAWS, VoiceOver) navegar por los campos y confirmar que las etiquetas se anuncian claramente y corresponden al texto visible.
    • Prueba funcional: asegurarse de que las etiquetas permanecen visibles en todo momento, incluso después de interactuar con los campos, y no desaparecen al escribir.

    }}