Regla de accesibilidad: Los elementos HTML con lang y xml:lang deben tener el mismo idioma base

Acerca de esta regla de accesibilidad

El atributo lang indica a los navegadores y tecnologías de asistencia en qué idioma está escrito el contenido. El atributo xml:lang cumple el mismo propósito pero proviene de la especificación XML/XHTML. Cuando ambos atributos están presentes en el mismo elemento—más comúnmente el elemento <html>—deben coincidir en el idioma base. El “idioma base” es la subetiqueta de idioma principal (por ejemplo, en en en-US o fr en fr-CA). Si un atributo dice en y el otro dice fr, las tecnologías de asistencia reciben información conflictiva y no pueden determinar de manera confiable cómo procesar el contenido.

Quién se ve afectado

Este problema impacta principalmente a usuarios de lectores de pantalla, incluyendo personas ciegas, sordociegas o con discapacidades cognitivas. Los lectores de pantalla mantienen bibliotecas de pronunciación separadas para cada idioma. Cuando encuentran una declaración de idioma, cambian a la biblioteca apropiada para que las palabras se pronuncien con la pronunciación y cadencia correctas. Una discrepancia entre lang y xml:lang puede causar que el lector de pantalla seleccione la biblioteca incorrecta o se comporte de manera impredecible, haciendo que el contenido sea difícil o imposible de entender.

Los usuarios que hablan múltiples idiomas y navegan sitios en diferentes idiomas son especialmente vulnerables, ya que dependen de declaraciones precisas de idioma para cambiar entre contextos lingüísticos.

Criterios de éxito WCAG relacionados

Esta regla se relaciona con el Criterio de Éxito WCAG 3.1.1: Idioma de la Página (Nivel A), que requiere que el idioma humano predeterminado de cada página web pueda determinarse programáticamente. Este criterio se aplica a WCAG 2.0, 2.1 y 2.2, así como a EN 301 549 y RGAA. Cuando lang y xml:lang entran en conflicto, el idioma determinado programáticamente se vuelve ambiguo, violando este requisito.

Cómo solucionarlo

Verifica el elemento <html> (y cualquier otro elemento) para la presencia de ambos atributos lang y xml:lang.
Asegúrate de que ambos atributos usen el mismo idioma base. Por ejemplo, si lang="en", entonces xml:lang también debe comenzar con en (por ejemplo, en, en-US o en-GB).
Si no necesitas xml:lang, la solución más simple es eliminarlo por completo. El atributo lang solo es suficiente para documentos HTML5.
Si estás sirviendo XHTML, ambos atributos pueden ser necesarios. En ese caso, mantenlos sincronizados.

Puedes encontrar códigos de idioma válidos en la página de referencia de códigos de idioma ISO 639. Los códigos comunes incluyen en para inglés, fr para francés, es para español, de para alemán y ar para árabe.

Ejemplos

Incorrecto: idiomas base no coincidentes

El atributo lang especifica inglés, pero xml:lang especifica francés. Esto crea un conflicto que confunde a las tecnologías de asistencia.

<html lang="en" xml:lang="fr">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Correcto: idiomas base coincidentes

Ambos atributos especifican inglés. La subetiqueta de dialecto puede diferir, pero el idioma base (en) es el mismo.

<html lang="en-US" xml:lang="en-GB">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Correcto: valores idénticos

El enfoque más simple y confiable—usa exactamente el mismo valor para ambos atributos.

<html lang="en" xml:lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Correcto: solo atributo `lang` (HTML5)

En documentos HTML5, el atributo xml:lang no es necesario. Usar solo lang evita cualquier posibilidad de discrepancia.

<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Correcto: especificar idioma en elementos en línea

Cuando aparece contenido en un idioma diferente dentro de la página, usa el atributo lang en el elemento apropiado. Si también usas xml:lang, asegúrate de que coincidan.

<p>Welcome to our site. <span lang="es" xml:lang="es">Bienvenidos a nuestro sitio.</span></p>

Para idiomas de derecha a izquierda, incluye también el atributo dir:

<p lang="ar" xml:lang="ar" dir="rtl">مرحبا بكم في موقعنا</p>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - Using the language attribute on the HTML element

→

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

Detecta problemas de accesibilidad automáticamente

Rocket Validator escanea miles de páginas con Axe Core y el W3C Validator, encontrando problemas de accesibilidad en todo tu sitio web.

Iniciar prueba gratuita Ver precios

Los elementos HTML con lang y xml:lang deben tener el mismo idioma base