Comprensible Legible Nivel A WCAG 2.0, 2.1, 2.2

3.1.1 Idioma de la página

Meta La tecnología de asistencia puede determinar el idioma de una página.

Qué hacer Indicar el idioma predominante en una página con el atributo lang en el elemento html.

Por qué importa Las personas que usan tecnología de asistencia obtienen información con la pronunciación y los caracteres del idioma correcto.

En esta página:

Criterio · ¿Qué es? · Impacto tecnológico · ¿Por qué importa? · ¿Quién se ve afectado? · Implementación · Ejemplos · Técnicas · Errores · Relacionados

Criterio de éxito oficial

3.1.1 Idioma de la página Nivel A

El idioma humano predeterminado de cada página web se puede determinar mediante programación.

Recomendación

Para sitios multilingües que apuntan al Nivel A, el Grupo de Trabajo recomienda también seguir el CE 3.1.2 Idioma de las partes (Nivel AA) para identificar los cambios de idioma dentro de la página.

¿Qué es?

El contenido puede presentarse en diferentes idiomas, e incluso en varios dentro de la misma página. La tecnología de asistencia necesita que las páginas web identifiquen programáticamente el idioma principal para presentar el texto correctamente. Esto se logra con un solo atributo: lang en el elemento <html>.

❌ Sin atributo lang

mitienda.com/fr

<html>

<h1>À propos de nous</h1>

<p>Appelez-nous...</p>

«Uh PROH-pus deh NOWSS»
«APP-ull-lez NOWSS»

El lector aplica reglas de pronunciación inglesas al texto francés. Resultado: incomprensible.

✓ Con lang="fr"

mitienda.com/fr

<h1>À propos de nous</h1>

<p>Appelez-nous...</p>

«Ah proh-POH duh noo»
«Ah-puh-LAY noo»

El lector carga reglas de pronunciación francesas. Resultado: claro y comprensible.

Impacto en la tecnología

Identificar el idioma de la página afecta a múltiples tecnologías:

Lectores de pantalla

Aplican las reglas de pronunciación del idioma correcto automáticamente.

Síntesis de voz

Seleccionan el motor de voz apropiado para el idioma declarado.

Braille

El software de braille sigue las convenciones ortográficas del idioma correcto.

Traducción

Las herramientas de traducción automática detectan el idioma origen correctamente.

¿Por qué es importante?

Sin el atributo lang, los lectores de pantalla aplican las reglas de pronunciación del idioma del sistema. Si la página está en francés pero el sistema está en inglés, el resultado es incomprensible. Los caracteres especiales de idiomas como árabe, chino o griego también pueden renderizarse incorrectamente sin esta información.

¿Quién se ve afectado?

Personas ciegas: Dependen completamente del lector de pantalla para conocer el contenido. Una pronunciación incorrecta hace el texto incomprensible.

Personas con discapacidades cognitivas: Usar tecnología de asistencia con el idioma correcto reduce la carga cognitiva y la confusión.

Usuarios de subtítulos automáticos: Los reproductores multimedia que generan subtítulos necesitan el idioma correcto para funcionar bien.

Cómo implementar 3.1.1

Añadir el atributo `lang`

La implementación es simple: añadir el atributo lang al elemento <html> con el código BCP 47 del idioma principal de la página.

HTML

<!-- Español -->
<html lang="es">

<!-- Inglés -->
<html lang="en">

<!-- Francés -->
<html lang="fr">

<!-- Español de México (con subtag de región) -->
<html lang="es-MX">

Códigos de idioma frecuentes

Códigos BCP 47 para idiomas comunes
Código	Idioma	Ejemplo
es	Español	`<html lang="es">`
en	Inglés	`<html lang="en">`
fr	Francés	`<html lang="fr">`
de	Alemán	`<html lang="de">`
gl	Gallego	`<html lang="gl">`
ca	Catalán	`<html lang="ca">`
pt	Portugués	`<html lang="pt">`
ar	Árabe	`<html lang="ar">`
zh	Chino	`<html lang="zh">`
ja	Japonés	`<html lang="ja">`

Ejemplos prácticos

Correcto Página española con lang="es"

Un blog en español tiene <html lang="es">. Los lectores de pantalla NVDA y JAWS cargan automáticamente las reglas de pronunciación del español.

Correcto Sitio multilingüe con lang por página

Una tienda online tiene versiones en español (lang="es"), inglés (lang="en") y francés (lang="fr"). Cada versión tiene su propio atributo lang en el elemento <html>.

Fallo Página sin atributo lang

Un portal de noticias en español no tiene lang en el <html>. Los lectores de pantalla asumen el idioma del sistema del usuario, que puede ser diferente, causando pronunciación incorrecta.

Fallo Código de idioma incorrecto

Una página en gallego tiene lang="es" en lugar de lang="gl". Los lectores de pantalla aplican reglas de pronunciación españolas en lugar de gallegas.

Técnicas recomendadas

Técnicas suficientes para CE 3.1.1
Código	Técnica	Tipo
H57	Uso del atributo `lang` en el elemento `html`	Suficiente
PDF16	Configurar el idioma predeterminado mediante el catálogo de documentos en PDF	Suficiente (PDF)
PDF19	Especificar el idioma de un pasaje o frase con la clave /Lang en PDF	Suficiente (PDF)

Errores comunes

F88: Omitir el atributo lang en el elemento <html>.

Usar un código de idioma incorrecto (por ejemplo lang="spanish" en lugar de lang="es").
Usar un subtag de región inexistente o incorrecto.
Olvidar actualizar el lang al crear versiones en otros idiomas.
CMS que generan páginas sin lang por defecto.