Addaw, ir a inicio Donar

Técnica HTML WCAG 2.2

H58Marcar con lang los fragmentos escritos en otro idioma

Nombre oficial en el W3C: Usar atributos de idioma para identificar los cambios de idioma

En pocas palabras

Cuando una página en español incluye una frase o un enlace en otro idioma, ese fragmento se marca con el atributo lang. Por ejemplo, lang="en" en una cita en inglés. Así el lector de pantalla cambia de voz para ese trozo y lo pronuncia bien.

Por qué es importante

Un lector de pantalla lee la página con la voz del idioma principal. Si encuentra una frase en inglés o en catalán sin marcar, la lee con pronunciación española y cuesta entenderla.

Afecta a personas ciegas, a personas con baja visión que usan voz y a quien usa programas de lectura en voz alta por dificultades de lectura. Un caso muy común es el selector de idiomas: «English» o «Català» leídos con voz española.

Cómo se hace

  1. Localice los fragmentos en otro idioma: citas, títulos de obras, enlaces del selector de idiomas, textos en catalán o euskera.
  2. Añada lang al elemento que contiene el fragmento: <q lang="fr">, <a lang="en">.
  3. Si el fragmento no tiene un elemento propio, rodéelo con <span lang="…">.
  4. No marque nombres propios ni palabras ya habituales en español, como «wifi» o «software».
  5. Use códigos válidos, como en, ca o fr.

Ejemplo práctico

Los cambios de idioma más habituales están en el selector de idiomas de la cabecera. También en citas, opiniones o nombres de obras en otro idioma dentro de una página en español. Por ejemplo, en 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. Aunque tenga activado el cambio automático de idioma, el lector de pantalla los pronuncia con la voz española. La cita cuesta de entender. Para notarlo hay que escuchar la demo con NVDA o VoiceOver.

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.

Ver el código del ejemplo incorrecto
<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>

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

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

Pruébelo aquí:

Ver el código del ejemplo correcto
<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>

Cómo comprobarlo

Lector de pantalla (NVDA o VoiceOver)

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

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

Herramientas del navegador

  1. Abrir las herramientas de desarrollo (F12), pestaña Consola.
  2. Ejecutar [...document.querySelectorAll('[lang]')].map(e => e.lang + ': ' + e.textContent.trim()). Muestra todos los fragmentos marcados, con su idioma.
  3. Comparar esa lista con el texto visible. Buscar fragmentos en otro idioma que falten.

Validación automática

  1. axe DevTools comprueba que los valores de lang dentro de la página son códigos válidos (regla valid-lang).
  2. No detecta texto en otro idioma sin marcar. Tampoco un código válido puesto a un idioma equivocado. Esto se revisa leyendo la página.

Errores frecuentes en auditorías

  • Selectores de idioma sin lang en cada nombre de idioma, o hechos solo con banderas.
  • Marcar con lang nombres propios o palabras ya habituales en español (software, marketing, wifi). No hace falta: el criterio 3.1.2 los exceptúa.
  • Textos alternativos o aria-label en otro idioma sin lang en su elemento. También se leen con la voz equivocada.
  • Códigos de idioma no válidos, como lang="cat" o lang="en_GB". O lang="uk" para el inglés británico: uk es ucraniano.
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 H58 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 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:

  1. 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:

  1. Comprobar que el valor del atributo lang se ajusta a BCP 47: Tags for Identifying Languages; Matching of Language Tags o a su sucesor.
  2. 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

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 H58 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.