Técnica HTML WCAG 2.2

H58Usar atributos de idioma para identificar los cambios de idioma

En resumen

Esta técnica consiste en añadir el atributo lang a cualquier elemento cuyo contenido esté en un idioma distinto del principal de la página: una cita en alemán, un título en inglés, un párrafo en catalán. Así, los lectores de pantalla cambian de voz y pronuncian correctamente cada fragmento, y las herramientas de traducción y los diccionarios lo tratan bien. Úsela en todos los pasajes en otro idioma salvo nombres propios, términos técnicos y palabras ya incorporadas al idioma de la página.

Ejemplo práctico

Los cambios de idioma más habituales están en el selector de idiomas de la cabecera y en citas, reseñas o nombres de obras en otro idioma dentro de una página en español, como la ficha de producto de una tienda de vinos.

Así no: Selector de idiomas y cita en francés sin lang

La página está en español y nada indica que «English», «Català», «Français» y la cita están en otros idiomas. Con el cambio automático de idioma activado, el lector de pantalla los pronuncia con la voz española y la cita resulta difícil de entender. Para notarlo hay que escuchar la demo con NVDA o VoiceOver.

<style>
  .idiomas { list-style: none; padding: 0; display: flex; gap: 16px; }
  .idiomas a { color: #744E9A; }
</style>
<nav aria-label="Idiomas">
  <ul class="idiomas">
    <li><a href="#" aria-current="page">Español</a></li>
    <li><a href="#">Català</a></li>
    <li><a href="#">English</a></li>
    <li><a href="#">Français</a></li>
  </ul>
</nav>
<h1>Crianza 2021, D. O. Jumilla</h1>
<p>En el concurso internacional de Burdeos, el jurado lo describió como
  <q>un vin d'une grande élégance</q>.</p>

Captura de pantalla del ejemplo incorrecto: Selector de idiomas y cita en francés sin lang — Así se ve el ejemplo incorrecto.

La demostración contiene, a propósito, el error de accesibilidad que se explica.

Así sí: Cada cambio de idioma marcado con lang

Cada enlace del selector lleva lang con el idioma de su texto (y hreflang con el de la página de destino), y la cita lleva lang="fr". El lector cambia de voz en esos fragmentos y vuelve al español al terminar.

<style>
  .idiomas { list-style: none; padding: 0; display: flex; gap: 16px; }
  .idiomas a { color: #744E9A; }
</style>
<nav aria-label="Idiomas">
  <ul class="idiomas">
    <li><a href="#" aria-current="page">Español</a></li>
    <li><a href="#" lang="ca" hreflang="ca">Català</a></li>
    <li><a href="#" lang="en" hreflang="en">English</a></li>
    <li><a href="#" lang="fr" hreflang="fr">Français</a></li>
  </ul>
</nav>
<h1>Crianza 2021, D. O. Jumilla</h1>
<p>En el concurso internacional de Burdeos, el jurado lo describió como
  <q lang="fr">un vin d'une grande élégance</q>.</p>

Pruébelo aquí:

Cómo comprobarlo

Lector de pantalla (NVDA o VoiceOver)

En NVDA, activar Preferencias > Opciones > Voz > «Cambio automático de idioma (cuando se admita)» y comprobar que hay voces instaladas para esos idiomas.
Recorrer el selector con Tab y leer el párrafo con las flechas.
Comprobar que cada fragmento en otro idioma se pronuncia con su voz y que el texto en español vuelve a la voz española.

Debería anunciar: «English, enlace», pronunciado con voz inglesa

Herramientas del navegador

Abrir las herramientas de desarrollo (F12), pestaña Consola.
Ejecutar [...document.querySelectorAll('[lang]')].map(e => e.lang + ': ' + e.textContent.trim()) para listar todos los fragmentos marcados.
Comparar la lista con el texto visible y buscar fragmentos en otro idioma que no aparezcan.

Validación automática

axe DevTools comprueba que los valores de lang en elementos internos sean códigos válidos (regla valid-lang).
No detecta texto en otro idioma sin marcar ni un código válido aplicado al idioma equivocado: esta técnica se revisa leyendo la página.

Errores frecuentes en auditorías

Selectores de idioma con los nombres de cada idioma escritos en su lengua pero sin lang, o representados solo con banderas.
Marcar con lang nombres propios o palabras ya incorporadas al español (software, marketing, wifi), algo innecesario que el criterio 3.1.2 exceptúa.
Textos alternativos o aria-label en otro idioma sin lang en el propio elemento, que también se leen con la voz equivocada.
Códigos de idioma no válidos, como lang="cat", lang="en_GB" o lang="uk" para el inglés británico (uk es ucraniano).

Técnica completa: traducción al español del texto del W3C

Aplicabilidad

HTML

Descripción

El objetivo de esta técnica es identificar claramente cualquier cambio de idioma dentro de una página usando el atributo lang.

Los valores permitidos para el atributo lang se indican en los recursos citados más abajo. Las etiquetas de idioma usan un código principal para indicar el idioma y subcódigos opcionales (separados por guiones) para indicar variantes del idioma. Por ejemplo, el inglés se indica con el código principal "en"; el inglés británico y el inglés estadounidense pueden distinguirse usando "en-GB" y "en-US", respectivamente. El uso del código principal es importante para esta técnica. El uso de subcódigos es opcional, pero puede resultar útil en determinadas circunstancias.

Ejemplos

Uso del atributo `lang` para definir una cita escrita en alemán

<blockquote lang="de">
  <p>
    Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
    aber der Esel merkte, daß kein guter Wind wehte, lief fort
    und machte sich auf den Weg nach Bremen: dort, meinte er,
    könnte er ja Stadtmusikant werden.
  </p>
</blockquote>

Pruebas

Procedimiento

Para cada elemento del documento:

Comprobar que el idioma humano del contenido del elemento es el mismo que el idioma heredado por el elemento según se especifica en HTML: los atributos lang y xml:lang.

Para cada atributo lang del documento:

Comprobar que el valor del atributo lang se ajusta a BCP 47: Tags for Identifying Languages; Matching of Language Tags o a su sucesor.
Comprobar que el código de idioma se corresponde con el idioma del contenido al que se aplica.

Resultados esperados

Todas las comprobaciones anteriores son verdaderas.

Recursos

HTML: los atributos lang y xml:lang.
El atributo «lang» de HTML en Mozilla Developer Network.
BCP 47: Tags for Identifying Languages; Matching of Language Tags (etiquetas para identificar idiomas).
Language tags in HTML and XML (etiquetas de idioma en HTML y XML).
Declaring language in HTML (declarar el idioma en HTML)

Cómo lo comprobamos en ADDAW

En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica H58 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.