Diferencia entre revisiones de «Principio 2/2.4 Navegable/2.4.6-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:
== '''2.4.6-B. Etiquetas de controles''' ==
{{CriterioWCAG
|id_wcag_criterio=2.4.6
|id_wcag_subcriterio=2.4.6-B
|wcag_titulo_criterio=2.4.6-B. Etiquetas de controles
|wcag_nivel=AA
|wcag_version=2.0
|wcag_principio=2_Operable
|wcag_principio_url=Principio_2
|wcag_pauta=2.4_Navegacion_clara
|wcag_pauta_url=Principio_2/2.4_Navegacion_clara
|wcag_grupo=Estructura_de_contenido
|wcag_subgrupo=Etiquetas_y_formularios
|wcag_subcriterio_url=Principio_2/2.4_Navegacion_clara/2.4.6-B


<!-- 
|wcag_discapacidades=
   Análisis interno:
<li class="discapacidad-item">
   Este criterio impacta principalmente a: Personas con discapacidad cognitiva y visual 
   [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
   Problema grave: Sin etiquetas claras, los usuarios no pueden entender la función de controles e interactuar correctamente, generando barreras graves. 
   <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
-->
   <span class="gravedad gravedad-grave">Barrera grave</span>
<html>
</li>
<!-- criterio 2.4.6-B -->
 
<article class="wcag-card">
<li class="discapacidad-item">
   <section class="wcag-info">
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
    <ul>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
      <li><span class="label">Nivel:</span><span class="value">AA</span></li>
   <span class="gravedad gravedad-moderada">Barrera moderada</span>
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
</li>
      <li><span class="label">Principio:</span><span class="value">2. Operable</span></li>
 
      <li><span class="label">Pauta:</span><span class="value">2.4 Proporcionar ayuda para navegar y buscar contenido</span></li>
<li class="discapacidad-item">
      <li><span class="label">Categoría:</span><span class="value">Interacción</span></li>
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
      <li><span class="label">Subcategoría:</span><span class="value">Etiquetas de controles</span></li>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
    </ul>
  <span class="gravedad gravedad-leve">Barrera leve</span>
  </section>
</li>
  <section class="wcag-users">
 
    <p>Usuarios más afectados</p>
|wcag_lista_discapacidades=
    <ul>
[[Categoría:Discapacidad cognitiva]]
      <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>
[[Categoría:Discapacidad baja visión]]
      <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>
[[Categoría:Discapacidad visual total]]
    </ul>
 
  </section>
|wcag_texto_criterioOAW=
</article>
Las etiquetas de los controles y elementos de interacción deben identificar claramente cuál es su propósito.
</html>
 
|wcag_descripcion_resumida=
Cada control interactivo debe incluir una etiqueta visible o accesible que describa su función, permitiendo a los usuarios comprender rápidamente cómo interactuar.
 
|wcag_objetivo=
Garantizar que los usuarios identifiquen correctamente la acción o el propósito de cada control, sin necesidad de exploración adicional o suposiciones.
 
|wcag_importancia=
Etiquetas claras mejoran la usabilidad, reducen errores, y permiten una interacción eficiente para personas con discapacidad cognitiva, usuarios de lectores de pantalla y quienes navegan por voz.
 
|wcag_referencias=
<ul>
<li>Understanding Success Criterion 2.4.6: Headings and Labels — W3C</li>
<li>WCAG 2.2 Quick Reference — 2.4.6</li>
<li>Guía Técnica WCAG — Principio Operable</li>
</ul>
 
|wcag_recursos=
<ul>
<li>Buenas prácticas de etiquetado accesible</li>
<li>Patrones <code>&lt;label&gt;</code>, <code>aria-label</code> y <code>aria-labelledby</code></li>
<li>Guía de formularios accesibles WebAIM</li>
</ul>
 
|wcag_tipo_evaluacion=Semiautomática
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Identificar todos los controles interactivos: botones, campos, iconos, enlaces accionables.</li>
<li><span class="paso-badge">Paso 2.</span> Confirmar que cada control tiene nombre visible o accesible programáticamente.</li>
<li><span class="paso-badge">Paso 3.</span> Verificar que las etiquetas son claras, únicas y describen la acción o propósito.</li>
<li><span class="paso-badge">Paso 4.</span> Validar la relación <code>label-for</code>, <code>id</code> o equivalentes ARIA.</li>
<li><span class="paso-badge">Paso 5.</span> Probar con lector de pantalla y con navegación por voz cuando sea posible.</li>
</ol>
 
|wcag_resultado_evaluacion=
Cada control cuenta con una etiqueta clara, visible o programáticamente accesible y correctamente asociada, que facilita su identificación y uso.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<strong>✅ Ejemplo accesible: control con etiqueta asociada</strong>
<pre class="wcag-codigo-html">
<label for="buscar">Buscar</label>
<input id="buscar" name="q" type="search">
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>NVDA, JAWS, VoiceOver — identificación de controles</li>
<li>AXE, WAVE, Accessibility Insights</li>
<li>Web Developer Toolbar — formulario y etiquetas</li>
<li>DevTools — inspección ARIA y nombres accesibles</li>
</ul>
}}

Revisión del 11:58 5 nov 2025

2.4.6-B. Etiquetas de controles

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 controles y elementos de interacción deben identificar claramente cuál es su propósito.

Comprensión del criterio

Descripción resumida

Cada control interactivo debe incluir una etiqueta visible o accesible que describa su función, permitiendo a los usuarios comprender rápidamente cómo interactuar.

Objetivo

Garantizar que los usuarios identifiquen correctamente la acción o el propósito de cada control, sin necesidad de exploración adicional o suposiciones.

Importancia de cumplir el criterio

Etiquetas claras mejoran la usabilidad, reducen errores, y permiten una interacción eficiente para personas con discapacidad cognitiva, usuarios de lectores de pantalla y quienes navegan por voz.

Referencias WCAG

  • Understanding Success Criterion 2.4.6: Headings and Labels — W3C
  • WCAG 2.2 Quick Reference — 2.4.6
  • Guía Técnica WCAG — Principio Operable

Recursos de apoyo

  • Buenas prácticas de etiquetado accesible
  • Patrones <label>, aria-label y aria-labelledby
  • Guía de formularios accesibles WebAIM

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

  1. Paso 1. Identificar todos los controles interactivos: botones, campos, iconos, enlaces accionables.
  2. Paso 2. Confirmar que cada control tiene nombre visible o accesible programáticamente.
  3. Paso 3. Verificar que las etiquetas son claras, únicas y describen la acción o propósito.
  4. Paso 4. Validar la relación label-for, id o equivalentes ARIA.
  5. Paso 5. Probar con lector de pantalla y con navegación por voz cuando sea posible.

Resultado esperado

Cada control cuenta con una etiqueta clara, visible o programáticamente accesible y correctamente asociada, que facilita su identificación y uso.

Ejemplo

✅ Ejemplo accesible: control con etiqueta asociada 

<label for="buscar">Buscar</label>
<input id="buscar" name="q" type="search">

Otras herramientas de evaluación

  • NVDA, JAWS, VoiceOver — identificación de controles
  • AXE, WAVE, Accessibility Insights
  • Web Developer Toolbar — formulario y etiquetas
  • DevTools — inspección ARIA y nombres accesibles










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 2.4.6-B. Etiquetas de controles

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_2/2.4_Navegable/2.4.6-B&oldid=3474»