Atributo lang HTML y accesibilidad: declarar el idioma de la página y de sus fragmentos (WCAG 3.1.1 y 3.1.2)

Para qué sirve el atributo lang de HTML en accesibilidad

El W3C explica que tanto las tecnologías de apoyo como los navegadores convencionales muestran el texto con más fidelidad cuando el idioma de la página está identificado. En concreto, dependen de ello tres cosas: los lectores de pantalla cargan las reglas de pronunciación del idioma declarado, los navegadores visuales muestran correctamente los caracteres y las escrituras, y los reproductores multimedia muestran correctamente los subtítulos.

El objetivo del criterio 3.1.1 es, por tanto, que los autores proporcionen en la propia página la información que los agentes de usuario necesitan para presentar correctamente el texto y el contenido lingüístico. El criterio 3.1.2 lleva esa lógica al interior de la página: cada fragmento en otro idioma puede presentarse con sus propias reglas de presentación y pronunciación, ya se use un navegador gráfico, un lector de pantalla, una línea braille o un navegador de voz.

El W3C da un ejemplo claro: sin marcado del idioma, un sintetizador de voz puede leer la palabra francesa «voiture» como «voyture».

El W3C cita como beneficiarios de ambos criterios:

• Las personas que usan un lector de pantalla u otra tecnología de texto a voz.
• Las personas a las que les cuesta leer un texto escrito con fluidez y precisión, por ejemplo reconocer los caracteres o descodificar las palabras.
• Las personas con ciertas discapacidades cognitivas, del lenguaje o del aprendizaje que usan software de texto a voz.
• Las personas que dependen de los subtítulos en los medios sincronizados.

Criterio 3.1.1: declarar el idioma predeterminado de la página

Según el W3C, el idioma humano predeterminado de una página web es su idioma predeterminado de procesamiento de texto. Cuando una página contiene varios idiomas, el predeterminado es el que más se usa. Si varios idiomas se usan por igual, el predeterminado es el primero que aparece.

El ejemplo del W3C es una página HTML producida en Alemania, mayoritariamente en alemán con algo de inglés: el idioma predeterminado es el alemán (de), declarado con el atributo lang en el elemento html. La técnica suficiente correspondiente es H57, «Usar el atributo de idioma en el elemento HTML». Para documentos PDF, la técnica PDF16 (entrada /Lang en el catálogo del documento) declara el idioma predeterminado; PDF19, que indica el idioma de un fragmento o una frase mediante la entrada Lang, también figura entre las técnicas suficientes. Declarar el idioma predeterminado en la cabecera HTTP (técnica SVR5) es solo una técnica recomendada, no una técnica suficiente.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Startseite</title>
  </head>
  <body>
    <!-- contenido mayoritariamente en alemán -->
  </body>
</html>

Un código de idioma válido en el atributo lang

Añadir el atributo no basta: su valor tiene que ser utilizable. Las reglas de prueba asociadas al criterio 3.1.1 comprueban que la página HTML tiene un atributo lang, que ese atributo contiene una etiqueta de idioma válida, que los atributos lang y xml:lang tienen valores coincidentes y que la subetiqueta de idioma coincide con el idioma predeterminado. Las dos últimas reglas todavía tienen el estado de «propuesta».

El criterio 3.1.2 también tiene reglas de prueba: un elemento con atributo lang debe tener una etiqueta de idioma válida y (regla propuesta) la subetiqueta de idioma de un elemento HTML con lang debe coincidir con el idioma de su contenido. Por tanto, el código de idioma de un fragmento también debe ser una etiqueta de idioma válida, igual que el del elemento html.

Los ejemplos del W3C usan códigos simples como de, fr o es, pero también etiquetas más precisas: un texto chino transliterado en pinyin puede marcarse como zh-Latn-pinyin.

• La página tiene un atributo lang en el elemento html.
• El valor es una etiqueta de idioma válida, sin errores tipográficos.
• Los valores de lang y xml:lang coinciden (regla de prueba propuesta).
• La subetiqueta de idioma coincide con el idioma predeterminado (regla de prueba propuesta).

Criterio 3.1.2: señalar los cambios de idioma en la página

El criterio 3.1.2 exige que el idioma humano de cada fragmento o frase pueda determinarse mediante programación. Una frase puede tener una sola palabra, así que una palabra aislada está cubierta salvo que entre en una excepción. El texto sin otro idioma especificado hereda el idioma predeterminado de la página; por eso, una página escrita íntegramente en un solo idioma cumple este criterio automáticamente.

La técnica suficiente es H58, «Usar atributos de idioma para identificar cambios en el idioma humano». El ejemplo del W3C: en una frase en inglés sobre la RDA, la expresión alemana «Treppenwitz der Weltgeschichte» se marca como alemana para que el lector de pantalla cambie de reglas de pronunciación.

El marcado también ayuda a los navegadores visuales a mostrar bien las escrituras, sobre todo al pasar de idiomas que se leen de izquierda a derecha a otros que se leen de derecha a izquierda, o de un alfabeto a otro. Además permite al software braille seguir los cambios de idioma y aplicar los códigos correctos, y facilita la consulta de diccionarios y las futuras herramientas de traducción automática.

Este es un marcado ilustrativo inspirado en ese ejemplo del W3C (la frase inglesa está abreviada):

<p lang="en">…
  <span lang="de">Treppenwitz der Weltgeschichte</span>
…</p>

Las excepciones: nombres propios, términos técnicos, vocabulario habitual

El criterio 3.1.2 excluye explícitamente los nombres propios, los términos técnicos, las palabras de idioma indeterminado y las palabras o frases que han pasado a formar parte de la lengua vernácula del texto que las rodea.

Para los nombres propios, el W3C pone el ejemplo de «Albert Camus» en un documento de filosofía en inglés: no hace falta ningún cambio de idioma. Los términos técnicos, que a menudo no se traducen, se ilustran con Homo sapiens, Alpha Centauri, hercio (hertz) o habeas corpus. En cuanto al vocabulario habitual, «rendezvous» está adoptado en inglés, y «podcast» en una frase francesa no necesita marcado.

En caso de duda, el W3C propone una pregunta sencilla: ¿se pronunciaría igual la palabra en el idioma del texto que la rodea? Marcar de todos modos el idioma de origen de una palabra extranjera sigue siendo una buena práctica, no obligatoria, que mejora la pronunciación.

Sitio multilingüe: selector de idioma y enlaces

Incluso con un objetivo de nivel A, el grupo de trabajo del W3C anima encarecidamente a los desarrolladores de sitios multilingües a seguir el criterio 3.1.2. El caso típico es el selector de idioma: en el ejemplo del W3C, cada enlace a otra versión usa el nombre del idioma en ese idioma («Deutsch», «Italiano», «Français», «繁體中文»), con su propio atributo lang.

Otro ejemplo del W3C: un enlace cuyo título está en inglés, pero cuyo span anidado con el texto «Español» lleva lang="es".

Atención al auditar: los lectores de pantalla anuncian nombres accesibles «planos», por ejemplo en una lista de enlaces, que pierden los cambios de idioma. Trasladar el atributo lang al propio elemento puede ayudar en algunos casos. Como se trata de una limitación de los agentes de usuario, no es un incumplimiento del criterio, pero el auditor debe revisar el marcado y no solo la salida de voz. El W3C recuerda además que la calidad de la pronunciación varía entre lectores de pantalla y sintetizadores de voz.

Para detectar rápidamente un atributo lang ausente o no válido, puede lanzar una prueba gratuita con Conformly y activar después la supervisión continua para recibir una alerta si una nueva plantilla reintroduce el error.

<nav aria-label="Idiomas">
  <ul>
    <li><a href="/de/" lang="de">Deutsch</a></li>
    <li><a href="/it/" lang="it">Italiano</a></li>
    <li><a href="/fr/" lang="fr">Français</a></li>
  </ul>
</nav>

Preguntas frecuentes

Más sobre el tema en Conformly

• Corregir un idioma de página no declarado
• Corregir un código de idioma no válido
• Criterio RGAA 8.3 sobre idioma predeterminado

Fuentes

Este artículo se basa en las fuentes oficiales citadas al final de la página.

• W3C — Comprendre 3.1.1
• W3C — Comprendre 3.1.2