TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Declarar el atributo lang es obligatorio, pero si su valor no obedece al estándar BCP 47 (ej: usar palabras completas como "español" o "spanish"), el navegador lo ignorará. El lector de pantalla retrocederá a su idioma por defecto, haciendo ininteligible la pronunciación (WCAG 3.1.2).
La estandarización de las lenguas
Los motores de voz de iOS, Windows o Android poseen diccionarios fonéticos muy estrictos. Para conmutar entre ellos, dependen de la etiqueta ISO de 2 letras (y opcionalmente la región). Al inventar el valor del atributo, el contrato se rompe silenciosamente, afectando de forma directa la comprensión lectora.
El patrón erróneo: Código Accesible Deficiente
Asumir que el navegador es lo suficientemente inteligente como para parsear palabras completas coloquiales.
<!-- MAL: Valores coloquiales no soportados por el estándar -->
<html lang="spanish">
<!-- ... -->
</html>
<!-- MAL: Error de sintaxis en el delimitador de región -->
<html lang="es_CO"> <!-- Usa guión bajo en vez de guión medio -->La Solución Accesible: Código Recomendado
Cumplimiento dogmático del estándar BCP 47: Código de idioma ISO 639-1 (dos letras en minúscula), seguido opcionalmente de un guión y el código de país ISO 3166-1 (dos letras en mayúscula).
<!-- BIEN: Código ISO básico -->
<html lang="es">...</html>
<!-- BIEN: Código regional BCP 47 válido -->
<html lang="es-CO">...</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.2.
Herramientas Automatizadas
Ejecutar Axe DevTools o WAVE sobre la vista afectada. Buscar violaciones relacionadas con el criterio WCAG 3.1.2. Complementar con una auditoría manual para los aspectos que las herramientas automatizadas no pueden verificar (interacción dinámica, calidad del contenido).
