TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Algunos desarrolladores configuran sus frameworks para renderizar <html lang=""> por defecto si la base de datos no devuelve el idioma. Un valor vacío hace que el lector de pantalla vuelva al idioma raíz del sistema operativo de la persona usuaria, arruinando la pronunciación.
La evasión de la responsabilidad semántica
Cumplir la WCAG 3.1.1 no se trata de apaciguar linters, sino de dirigir el motor de síntesis de voz (TTS). Al enviarle una cadena vacía, el TTS asume que el idioma es "desconocido" e intenta aplicar su matriz fonética nativa. Si un estadounidense visita un portal colombiano mal configurado, escuchará un galimatías.
El patrón erróneo: Código Accesible Deficiente
La etiqueta existe en el DOM, creando la ilusión de un código robusto, pero el valor nulo la inactiva.
<!-- MAL: Atributo presente pero inútil -->
<!DOCTYPE html>
<html lang="">
<!-- El lector de voz no sabrá qué diccionario cargar -->
</html>La Solución Accesible: Código Recomendado
Garantizar desde el lado del servidor o en el build estático que el atributo siempre posea un código BCP 47 de dos letras como mínimo.
<!-- BIEN: Directriz inequívoca para el sintetizador -->
<!DOCTYPE html>
<html lang="es">
<!-- El motor TTS cambiará su fonética al español inmediatamente -->
</html>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Activar NVDA o VoiceOver y navegar al contenido de la página. Verificar que la pronunciación del sintetizador de voz sea correcta para el idioma declarado. Si las palabras suenan con fonética incorrecta (ej: español leído con acento inglés), el atributo lang está ausente o tiene un valor inválido.
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 3.1.1.
Herramientas Automatizadas
Ejecutar Axe DevTools o WAVE sobre la vista afectada. Buscar violaciones relacionadas con el criterio WCAG 3.1.1. Complementar con una auditoría manual para los aspectos que las herramientas automatizadas no pueden verificar (interacción dinámica, calidad del contenido).
