TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Si construyes un elemento <select> sin vincularlo a un <label> (a través del atributo for e id), el lector de pantalla dirá "Combo box, colapsado". La persona usuaria no sabrá si debe seleccionar su ciudad, su género o su tipo de documento.
La desconexión del contexto de entrada
Es muy común ver formularios donde la etiqueta visual existe, pero es simplemente un <p> o un <span> colocado arriba del campo. Visualmente funciona, pero a nivel de código es un fallo crítico del Criterio 4.1.2 (Nombre, Función, Valor).
El patrón erróneo: Código Accesible Deficiente
El texto está cerca, pero no hay un vínculo matemático en el DOM. El lector de pantalla procesa el texto y el campo como entidades separadas.
<!-- MAL: Etiqueta huérfana sin vínculo for/id -->
<p class="form-label">Departamento</p>
<select name="depto">
<option>Bogotá</option>
<option>Antioquia</option>
</select>La Solución Accesible: Código Recomendado
Vincular explícitamente mediante el par for / id. Si el diseño prohíbe absolutamente una etiqueta visual (ej. un selector de idioma aislado), usa aria-label.
<!-- BIEN: Vinculación programática estricta -->
<label for="sel-departamento">Departamento</label>
<select id="sel-departamento" name="depto">
<option>Bogotá</option>
<option>Antioquia</option>
</select>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA activo, presionar F para saltar entre campos de formulario. Verificar que el lector de pantalla anuncie correctamente el nombre, tipo y estado del campo. Si el campo no posee una etiqueta vinculada programáticamente, el lector solo anunciará el tipo de control sin contexto. En VoiceOver (iOS), tocar el campo y confirmar que la descripción sea completa.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 4.1.2.
Herramientas Automatizadas
Ejecutar Axe DevTools: las reglas aria-* y *-name detectan violaciones del Criterio 4.1.2 (Nombre, Función, Valor). WAVE marca controles sin nombre accesible. Limitación: La sincronización de estados dinámicos (JS) no siempre es verificable de forma automatizada.
