Principio 2/2.4 Navegable/2.4.6-B

De WCAG Wiki

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»