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
 
(No se muestran 2 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''3.3.2-A. Etiquetas visibles''' ==
{{CriterioWCAG
<!-- Análisis interno:
|id_wcag_criterio=3.3.2
Impacto principal:
|id_wcag_subcriterio=3.3.2-A
- Personas con discapacidad cognitiva o baja visión que necesitan etiquetas claras y visibles para comprender el propósito de cada campo.
|wcag_titulo_criterio=3.3.2-A. Etiquetas visibles
Gravedad: Barrera grave si las etiquetas no son visibles o están ausentes, ya que impide completar formularios correctamente.
|wcag_nivel=A
-->
|wcag_version=2.0
<html>
|wcag_principio=3_Comprensible
<!-- criterio 3.3.2-A -->
|wcag_principio_url=Principio_3
<article class="wcag-card">
|wcag_pauta=3.3_Assistencia_en_los_input
  <section class="wcag-info">
|wcag_pauta_url=Principio_3/3.3_Assistencia_en_los_input
    <ul>
|wcag_grupo=Formularios
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
|wcag_subgrupo=Etiquetas
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
|wcag_subcriterio_url=Principio_3/3.3_Asistencia_en_la_entrada/3.3.2-A
      <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">Etiquetas visibles</span></li>
    </ul>
  </section>


  <section class="wcag-users">
|wcag_discapacidades=
    <p>Usuarios más afectados</p>
<li class="discapacidad-item">
    <ul>
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
      <li>
  <span class="discapacidad-texto">[[:Categoría:Baja visión|Baja visión]]</span>
        <img src="/images/b/b7/Bajavision.png" alt="Icono baja visión" class="icono-discapacidad" />
  <span class="gravedad gravedad-grave">Barrera grave</span>
        Personas con baja visión – <span class="gravedad">Barrera grave</span>
</li>
      </li>
<li class="discapacidad-item">
      <li>
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
        <img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" />
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
        Personas con discapacidad cognitiva – <span class="gravedad">Barrera moderada</span>
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
      </li>
</li>
    </ul>
 
  </section>
|wcag_lista_discapacidades=
</article>
[[Categoría:Baja visión]]
</html>
[[Categoría:Discapacidad cognitiva]]
 
}}
|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=
<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/quickref/#labels-or-instructions WCAG Quick Reference – 3.3.2]</span></li>
<li>[https://webaim.org/techniques/forms/ WebAIM — Accessible Forms]</li>
 
|wcag_recursos=
<ul>
<li>[https://www.w3.org/WAI/tutorials/forms/instructions/ Form Instructions]</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>
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>
 
 
|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=
<div class="accessibility-card">
Etiqueta clara y visible.
<pre class="wcag-codigo-html">
<form>
  <label for="nombre">Nombre completo</label>
  <input id="nombre" name="nombre" type="text">
</form>
</pre>
</div>
 
 
|wcag_otras_herramientas_evaluacion=
<ul>
<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>'''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>'''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>'''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>
 
}}

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

    }}