Addaw, ir a inicio Donar

Técnica HTML WCAG 2.2

H57Indicar el idioma de la página con lang en el elemento html

Nombre oficial en el W3C: Usar el atributo de idioma en el elemento html

En pocas palabras

Cada página debe indicar en qué idioma está escrita. Se hace con el atributo lang en el elemento html, por ejemplo lang="es" para el español. Así el lector de pantalla usa la voz y la pronunciación correctas, y el navegador sabe cómo traducir la página o cortar las palabras.

Por qué es importante

  • Los lectores de pantalla (programas que leen en voz alta lo que hay en la pantalla) eligen la voz según este atributo. Sin él, pueden leer un texto en español con pronunciación inglesa, y no se entiende.
  • Las líneas braille y los traductores automáticos también lo usan.
  • El navegador lo usa para cortar palabras con guion, para la corrección ortográfica y para elegir tipos de letra.

Cómo se hace

  1. Añada lang al elemento <html> de la plantilla base: <html lang="es">.
  2. Use códigos de idioma válidos: es, ca, eu, gl, en.
  3. Si añade el país, sepárelo con guion (es-ES), nunca con guion bajo.
  4. Ponga el idioma real del contenido, no el que traía la plantilla.
  5. En webs con varios idiomas, haga que cada versión cambie el valor de forma automática.

Ejemplo práctico

El idioma de la página se declara una sola vez, en la plantilla base del sitio. Puede ser el tema de WordPress, la maqueta del CMS o el index.html de una aplicación de React o Vue. A menudo el elemento html no tiene lang o conserva el inglés de la plantilla.

Así no: Página en español sin atributo lang

El elemento html no indica el idioma. El lector de pantalla usa la voz que tenga configurada. Si está en inglés o en catalán, «Pedir cita previa» suena con la pronunciación de otro idioma. Los traductores automáticos y los correctores tampoco saben en qué idioma está el texto.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Pedir cita previa – Ayuntamiento de Villanueva</title>
</head>
<body>
  <h1>Pedir cita previa</h1>
  <p>Seleccione el trámite y la oficina donde desea ser atendido.</p>
</body>
</html>

Así sí: Idioma principal declarado en el elemento html

Se añade lang="es" al elemento html. Es un código de idioma válido (norma BCP 47) y coincide con el idioma real del texto. El lector cambia a la voz española. El navegador traduce y corta las palabras correctamente.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Pedir cita previa – Ayuntamiento de Villanueva</title>
</head>
<body>
  <h1>Pedir cita previa</h1>
  <p>Seleccione el trámite y la oficina donde desea ser atendido.</p>
</body>
</html>

Cómo comprobarlo

Herramientas del navegador

  1. Abrir las herramientas de desarrollo (F12), pestaña Elementos. Revisar la etiqueta de apertura <html>.
  2. En la pestaña Consola, ejecutar document.documentElement.lang. Debe devolver "es" o "es-ES". Si devuelve una cadena vacía, falta el atributo.
  3. Comprobar que el valor coincide con el idioma real del texto. No basta con que exista.

Lector de pantalla (NVDA o VoiceOver)

  1. En NVDA, activar «Cambio automático de idioma (cuando se admita)» en Preferencias > Opciones > Voz.
  2. Poner de forma temporal la voz de NVDA en otro idioma, por ejemplo inglés, y cargar la página.
  3. Ir al encabezado con la tecla H. Sin lang, se pronuncia con la voz inglesa. Con lang="es", NVDA cambia a la voz española.

Debería anunciar: «Pedir cita previa, encabezado, nivel 1», con voz en español

Validación automática

  1. axe DevTools detecta si falta el atributo (regla html-has-lang). También detecta valores no válidos como sp o es_ES (regla html-lang-valid). Lighthouse hace la misma comprobación.
  2. Ninguna herramienta automática detecta un valor válido pero equivocado, como lang="en" en una página en español. Eso se revisa a mano.

Errores frecuentes en auditorías

  • Temas y plantillas con lang="en" o lang="en-US" fijo, usados sin cambiar en webs en español.
  • Valores que no cumplen la norma BCP 47: lang="sp", lang="es_ES" (con guion bajo) o lang="spanish".
  • Webs con varios idiomas en las que las páginas en catalán, euskera o inglés siguen con lang="es". Suele pasar cuando el atributo está escrito a mano en la plantilla.
  • Poner el atributo en body o en un contenedor, y no en html. Así el título de la página queda sin idioma.

Para saber más, en nuestro blog

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica H57 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

HTML

Descripción

El objetivo de esta técnica es identificar el idioma predeterminado de un documento proporcionando el atributo lang en el elemento html.

Identificar el idioma del documento es importante por varias razones:

  • Permite que el software de transcripción braille sustituya los caracteres acentuados por códigos de control e inserte los códigos de control necesarios para evitar la creación errónea de contracciones del braille de grado 2.
  • Los sintetizadores de voz que admiten varios idiomas podrán orientarse y adaptarse a la pronunciación y la sintaxis propias del idioma de la página, leyendo el texto con el acento apropiado y la pronunciación correcta.
  • Marcar el idioma puede beneficiar a futuros avances tecnológicos; por ejemplo, los usuarios que no puedan traducir por sí mismos entre idiomas podrán usar máquinas para traducir idiomas que no conocen.
  • Marcar el idioma también puede ayudar a los agentes de usuario a proporcionar definiciones mediante un diccionario.

Ejemplos

Definir que el contenido de un documento HTML está en francés

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>document écrit en français</title>
</head>
<body>
  ... document écrit en français ...
</body>
</html>

Pruebas

Procedimiento

Examinar el elemento html del documento.

  1. Comprobar que el elemento html tiene un atributo lang.
  2. Comprobar que el valor del atributo lang se ajusta a BCP 47: Tags for Identifying Languages; Matching of Language Tags o a su sucesor, y que refleja el idioma principal usado en la página web.

Resultados esperados

  • Las comprobaciones n.º 1 y n.º 2 son verdaderas.

Recursos

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica H57 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.