Ver contenido
Atributos de Idioma: Asegurando la Identificación Correcta del Idioma para Accesibilidad
Introducción
El atributo lang de HTML indica a los navegadores y tecnologías asistivas en qué idioma humano está tu contenido. WCAG 3.1.1 (Idioma de la Página) requiere que cada página web declare su idioma principal. Este atributo aparentemente simple tiene impactos profundos en la accesibilidad, pronunciación y experiencia de usuario.
Los lectores de pantalla usan el atributo de idioma para seleccionar las reglas de pronunciación y voz correctas. Sin una identificación adecuada del idioma, un lector de pantalla podría leer texto en francés con pronunciación en inglés, haciendo el contenido incomprensible para los usuarios.
Qué Requiere WCAG
3.1.1 Idioma de la Página (Nivel A)
El idioma humano predeterminado de cada página web puede determinarse programáticamente.
Esto significa:
- Cada página HTML debe tener un atributo
langen el elemento<html> - El valor debe ser una etiqueta de idioma BCP 47 válida (ej., “es”, “en”, “fr”)
- Esto permite que las tecnologías asistivas carguen reglas de pronunciación apropiadas
3.1.2 Idioma de las Partes (Nivel AA)
El idioma humano de cada pasaje o frase en el contenido puede determinarse programáticamente.
Esto significa:
- El contenido en un idioma diferente al predeterminado de la página debe tener su propio atributo
lang - Esto aplica a citas, frases o secciones en idiomas extranjeros
- Excepciones: nombres propios, términos técnicos, palabras que se han convertido en parte del idioma circundante
Quién Se Beneficia
| Tipo de Usuario | Beneficio |
|---|---|
| Usuarios de lectores de pantalla | Pronunciación correcta del contenido |
| Usuarios de herramientas de traducción | Traducción precisa y dirigida |
| Usuarios con discapacidades de lectura | Separación silábica y procesamiento de texto apropiados |
| Motores de búsqueda | Mejor comprensión del idioma del contenido |
| Todos los usuarios | Corrección ortográfica y auto-corrección correctas |
Implementación Básica
Idioma de la Página
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de Página</title>
</head>
<body>
<!-- Contenido de página en español -->
</body>
</html>
Idioma de las Partes
<p>
La frase en inglés <span lang="en">that's life</span> significa "así es la vida".
</p>
<blockquote lang="en">
<p>To be or not to be, that is the question.</p>
<cite>— William Shakespeare</cite>
</blockquote>
Códigos de Idioma Comunes
| Idioma | Código | Variantes Extendidas |
|---|---|---|
| Español | es |
es-ES, es-MX, es-AR |
| Inglés | en |
en-US, en-GB, en-AU |
| Francés | fr |
fr-FR, fr-CA |
| Alemán | de |
de-DE, de-AT, de-CH |
| Portugués | pt |
pt-BR, pt-PT |
| Chino | zh |
zh-CN, zh-TW, zh-Hans, zh-Hant |
| Japonés | ja |
ja-JP |
| Coreano | ko |
ko-KR |
| Árabe | ar |
ar-SA, ar-EG |
| Ruso | ru |
ru-RU |
Problemas Comunes
1. Atributo lang Faltante
<!-- MAL: Sin idioma especificado -->
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
<!-- BIEN: Idioma declarado -->
<!DOCTYPE html>
<html lang="es">
<head>...</head>
<body>...</body>
</html>
2. Código de Idioma Incorrecto
<!-- MAL: Códigos de idioma inválidos -->
<html lang="espanol">
<html lang="spa">
<html lang="es_MX">
<!-- BIEN: Códigos BCP 47 válidos -->
<html lang="es">
<html lang="es-MX">
3. Frases Extranjeras Sin Etiquetas de Idioma
<!-- MAL: Inglés pronunciado con reglas del español -->
<p>El término marketing es muy usado en negocios.</p>
<!-- BIEN: Palabra inglesa marcada para pronunciación correcta -->
<p>El término <span lang="en">marketing</span> es muy usado en negocios.</p>
4. Desajuste de Idioma
<!-- MAL: Página en español pero marcada como inglés -->
<html lang="en">
<body>
<h1>Bienvenido a nuestro sitio</h1>
<!-- Contenido en español... -->
</body>
</html>
<!-- BIEN: Declaración de idioma correcta -->
<html lang="es">
<body>
<h1>Bienvenido a nuestro sitio</h1>
</body>
</html>
Cuándo Marcar el Idioma de las Partes
Sí Marcar
- Palabras extranjeras que podrían pronunciarse mal
- Citas en otros idiomas
- Pasajes o secciones en diferentes idiomas
- Términos técnicos de otros idiomas (cuando la pronunciación importa)
<!-- Cita extranjera -->
<blockquote lang="en">
<p>To be or not to be.</p>
</blockquote>
<!-- Frase extranjera -->
<p>El concepto de <span lang="de">Weltanschauung</span> es fundamental.</p>
No Necesitas Marcar
- Nombres propios (como “François” o “München”)
- Términos técnicos ampliamente usados (como “software” o “internet”)
- Palabras adoptadas al español (como “fútbol” o “restaurante”)
- Nombres de marcas
<!-- Estos no necesitan atributos lang -->
<p>Conoce a nuestro CEO, François Martin.</p>
<p>Actualiza el software del sistema.</p>
<p>El internet cambió el mundo.</p>
Impacto en Lectores de Pantalla
Cuando un lector de pantalla encuentra texto, verifica el atributo lang para seleccionar reglas de pronunciación:
| Sin lang | Con lang |
|---|---|
| “mar-ket-ing” (pronunciación española) | “már-ke-ting” (pronunciación inglesa) |
| El lector de pantalla adivina el idioma | El lector de pantalla sabe el idioma exacto |
| Potencialmente incomprensible | Pronunciación clara y correcta |
Probando Atributos de Idioma
Prueba Manual Rápida
- Verifica que
<html>tenga un atributolang - Confirma que el código de idioma coincida con el contenido de la página
- Busca frases extranjeras y verifica los atributos
lang - Usa un lector de pantalla para verificar la pronunciación
Qué Verificar
- [ ] La página tiene atributo
langen el elemento<html> - [ ] El código de idioma tiene formato BCP 47 válido
- [ ] El idioma coincide con el contenido real de la página
- [ ] Las frases extranjeras tienen atributos
langapropiados - [ ] El lector de pantalla pronuncia el contenido correctamente
Herramientas para Pruebas
- axe DevTools - Señala idioma de página faltante
- WAVE - Muestra atributos de idioma
- DevTools del navegador - Inspeccionar elemento
<html> - Validador W3C - Valida códigos de idioma
Resumen de Mejores Prácticas
| Hacer | No Hacer |
|---|---|
Siempre incluir lang en <html> |
Dejar el atributo lang faltante |
| Usar códigos BCP 47 válidos | Usar nombres completos de idioma o códigos inválidos |
| Marcar frases extranjeras | Dejar contenido extranjero sin marcar |
| Hacer coincidir lang con el contenido real | Usar código de idioma incorrecto |
| Probar con lectores de pantalla | Asumir que la pronunciación es correcta |
Artículos Relacionados
- Guía de Implementación de Atributos de Idioma - Patrones detallados
- Guía de HTML Semántico - Estructura de documento
- Hub de Cumplimiento WCAG - Todos los evaluadores de accesibilidad
Referencias
- W3C - WCAG 2.2 SC 3.1.1 Language of Page
- W3C - WCAG 2.2 SC 3.1.2 Language of Parts
- W3C - H57 Using lang attribute
- MDN - lang attribute