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

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-B. Ubicación de etiquetas''' ==
{{CriterioWCAG
|id_wcag_criterio=3.3.2
|id_wcag_subcriterio=3.3.2-B
|wcag_titulo_criterio=3.3.2-B. Ubicación de etiquetas
|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=Etiquetas
|wcag_subcriterio_url=Principio_3/3.3_Asistencia_en_la_entrada/3.3.2-B


<!-- Análisis interno: Este criterio impacta principalmente a: Personas con discapacidad cognitiva y visual (baja visión). Problema grave: Si las etiquetas no están correctamente ubicadas o asociadas, los usuarios pueden no entender qué dato deben introducir o pueden confundirse entre campos. Gravedad: Barrera moderada, ya que afecta la comprensión y la precisión en el llenado de formularios. -->
|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-moderada">Barrera moderada</span>
</li>
<li class="discapacidad-item">
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
  <span class="discapacidad-texto">[[:Categoría:Baja visión|Baja visión]]</span> –
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>


<!-- criterio 3.3.2-B -->
|wcag_texto_criterioOAW=
<html>
Las etiquetas de los campos del formulario deben colocarse de forma que su relación con el campo sea evidente.
<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">Ubicación de etiquetas</span></li>
    </ul>
  </section>


  <section class="wcag-users">
|wcag_descripcion_resumida=
    <p>Usuarios más afectados</p>
Las etiquetas se deben ubicar cerca del campo correspondiente y de forma consistente para facilitar su asociación.
    <ul>
 
      <li><img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" /> Personas con discapacidad cognitiva – <span class="gravedad">Barrera moderada</span></li>
|wcag_objetivo=
      <li><img src="/images/b/b7/Bajavision.png" alt="Icono baja visión" class="icono-discapacidad" /> Personas con baja visión – <span class="gravedad">Barrera moderada</span></li>
Asegurar claridad visual y semántica entre etiqueta y campo, reduciendo errores y carga cognitiva.
    </ul>
 
  </section>
|wcag_importancia=
</article>
Una etiqueta ubicada lejos o mal alineada confunde a usuarios con discapacidad cognitiva o baja visión y genera errores al completar formularios.
</html>
 
|wcag_referencias=
<ul>
<li>[https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html Understanding SC 3.3.2]</li>
<li>[https://webaim.org/techniques/forms/ WebAIM — Accessible Forms]</li>
<li>[https://design-system.service.gov.uk/components/text-input/ GOV.UK Design System — Labels]</li>
</ul>
 
|wcag_recursos=
<ul>
<li>Etiquetas encima del campo (recomendado en móvil)</li>
<li>Uso correcto de <code>label for</code> y <code>fieldset/legend</code></li>
</ul>
 
|wcag_tipo_evaluacion=Manual
|wcag_pasos_evaluacion=
<ol>
<li>Verificar ubicación consistente de etiquetas junto a sus campos.</li>
<li>Comprobar que la asociación visual y semántica es evidente.</li>
<li>Probar zoom y lector de pantalla.</li>
</ol>
 
|wcag_resultado_evaluacion=
Las etiquetas están próximas a los campos y su relación es clara.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<strong>✅ Etiqueta encima del campo</strong>
<pre>
<label for="email">Correo electrónico</label>
<input id="email" type="email">
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>Zoom 200–400%</li>
<li>NVDA/JAWS/VoiceOver</li>
<li>DevTools — accesibilidad</li>
</ul>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Baja visión]]
}}

Revisión del 12:59 5 nov 2025

3.3.2-B. Ubicación de etiquetas

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)

  • Las etiquetas de los campos del formulario deben colocarse de forma que su relación con el campo sea evidente.

Comprensión del criterio

Descripción resumida

Las etiquetas se deben ubicar cerca del campo correspondiente y de forma consistente para facilitar su asociación.

Objetivo

Asegurar claridad visual y semántica entre etiqueta y campo, reduciendo errores y carga cognitiva.

Importancia de cumplir el criterio

Una etiqueta ubicada lejos o mal alineada confunde a usuarios con discapacidad cognitiva o baja visión y genera errores al completar formularios.

Referencias WCAG

Recursos de apoyo

  • Etiquetas encima del campo (recomendado en móvil)
  • Uso correcto de label for y fieldset/legend

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Verificar ubicación consistente de etiquetas junto a sus campos.
  2. Comprobar que la asociación visual y semántica es evidente.
  3. Probar zoom y lector de pantalla.

Resultado esperado

Las etiquetas están próximas a los campos y su relación es clara.

Ejemplo

✅ Etiqueta encima del campo 

<label for="email">Correo electrónico</label>
<input id="email" type="email">

Otras herramientas de evaluación

  • Zoom 200–400%
  • NVDA/JAWS/VoiceOver
  • DevTools — accesibilidad










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 3.3.2-B. Ubicación de etiquetas

Loading comments...




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