accessibility

Atributo lang en HTML

MetricSpot lee el atributo `lang` en `<html>`. Sin él, los lectores de pantalla eligen la voz equivocada y la tecnología asistiva no sabe cambiar de idioma.

Qué comprueba esta verificación

Lee el atributo lang del elemento raíz <html>. Su valor debe ser una etiqueta BCP 47 válida (en, en-GB, es, pt-BR, etc.).

Por qué importa

Los lectores de pantalla como NVDA, JAWS y VoiceOver usan este atributo para elegir el sintetizador de voz y la pronunciación correctos. Un lang ausente lee contenido en inglés con la voz que el usuario tenga por defecto — a menudo español o alemán, produciendo galimatías. La WCAG 3.1.1 lo considera requisito de nivel A; el Reglamento Europeo de Accesibilidad (en vigor desde junio de 2025) trata la falta de lang como un defecto de cumplimiento.

Los motores de búsqueda también se apoyan en él para detectar el idioma, junto con hreflang y las señales de contenido.

Cómo arreglarlo

Configura el atributo en el elemento raíz:

<html lang="es">

Para variantes regionales, usa una subetiqueta BCP 47:

<html lang="es-MX">  <!-- Español de México -->
<html lang="pt-BR">  <!-- Portugués de Brasil -->
<html lang="zh-Hant"><!-- Chino tradicional -->

Astro: configúralo en src/layouts/BaseLayout.astro:

<html lang={Astro.currentLocale ?? "es"}>

Next.js (App Router): en app/layout.tsx:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <html lang="es"><body>{children}</body></html>;
}

WordPress: vive en header.php:

<html <?php language_attributes(); ?>>

language_attributes() ya emite lang="es-ES" según Ajustes → Generales → Idioma del sitio. No lo sobreescribas a mano.

Páginas multilingües: añade lang en el elemento contenedor cuando el contenido cambie de idioma a mitad de la página:

<p>Los franceses lo llaman <span lang="fr">la mode</span>.</p>

Eso es lo que hace que <span lang="fr"> se lea con voz francesa en lugar de destrozar el acento.

Si además sirves varios idiomas, combínalo con etiquetas hreflang para que Google envíe el idioma correcto al usuario correcto.

Preguntas frecuentes

¿Cuál es la diferencia entre lang y xml:lang?

lang es el atributo HTML; xml:lang es su equivalente en XHTML/XML. Para documentos HTML5, basta con lang. Para documentos polígotos (raros hoy), configura ambos con el mismo valor.

¿Puedo omitir lang si detecto el idioma con JavaScript?

No. Los lectores de pantalla analizan el HTML antes de que se ejecute JS, y muchos usuarios de tecnología asistiva tienen JS desactivado. El atributo debe estar en el HTML estático.

¿Por qué Lighthouse marca lang="" como inválido?

Una cadena vacía no es una etiqueta BCP 47 válida. O pones un código de idioma real o eliminas el atributo (peor — la verificación sigue fallando). Lo mismo aplica a lang="default" o a otros valores marcador con los que vienen algunas plantillas de CMS.

Fuentes

Última actualización 2026-05-11