Acerca de esta regla de accesibilidad
Los lectores de pantalla dependen de la información del idioma para seleccionar el motor de pronunciación correcto para el contenido. Cada idioma tiene su propia biblioteca de sonidos con reglas de pronunciación, entonación y patrones fonéticos únicos. Cuando un lector de pantalla encuentra un atributo lang con un valor válido, cambia sin problemas a la biblioteca apropiada. Pero cuando el valor es inválido — por ejemplo, lang="egnlish" en lugar de lang="en" — el lector de pantalla no puede identificar el idioma y recurre a su configuración predeterminada, leyendo el texto en idioma extranjero con una pronunciación completamente incorrecta.
Esto afecta principalmente a usuarios ciegos y usuarios sordociegos que dependen de lectores de pantalla, así como a usuarios con discapacidades cognitivas que pueden depender de herramientas de texto a voz. Imagina escuchar texto en español pronunciado con reglas fonéticas del inglés — sería prácticamente incomprensible.
Ten en cuenta que esta regla específicamente verifica los atributos lang en elementos dentro de la página (no el elemento <html> en sí, que está cubierto por una regla separada). Se aplica siempre que uses el atributo lang para indicar que una sección de contenido está en un idioma diferente al resto de la página.
Criterios de éxito WCAG relacionados
Esta regla se mapea con el Criterio de Éxito 3.1.2 de WCAG 2.0 / 2.1 / 2.2: Idioma de las partes (Nivel AA). Este criterio requiere que el idioma humano de cada pasaje o frase en el contenido pueda determinarse programáticamente, excepto para nombres propios, términos técnicos y palabras de idioma indeterminado. Usar un código de idioma válido es esencial para cumplir este requisito — un código inválido falla en transmitir programáticamente el idioma.
Esta regla también es referenciada por la metodología Trusted Tester, EN 301 549 y RGAA.
Cómo solucionarlo
-
Usa códigos de idioma válidos. Los valores de idioma deben cumplir con el estándar BCP 47. En la práctica, esto significa usar códigos de dos o tres letras del Registro de Subetiquetas de Idioma IANA. Ejemplos comunes incluyen
en(inglés),fr(francés),es(español),de(alemán),zh(chino),ar(árabe) yja(japonés). -
Verifica errores ortográficos. Los valores inválidos a menudo son causados por errores ortográficos (p. ej.,
lang="enlish") o usar nombres completos de idiomas en lugar de códigos (p. ej.,lang="French"en lugar delang="fr"). -
Usa subetiquetas de dialecto cuando sea apropiado. Puedes especificar variantes regionales como
en-US(inglés americano),en-GB(inglés británico) ofr-CA(francés canadiense). La subetiqueta principal sola también es válida. -
Establece el atributo
dirpara idiomas RTL. Si estás marcando contenido en un idioma de derecha a izquierda como árabe o hebreo, combina el atributolangcondir="rtl"para asegurar el renderizado correcto del texto.
Ejemplos
Incorrecto: Código de idioma inválido
<p>Welcome to our site. <span lang="spn">Bienvenidos a nuestro sitio.</span></p>
El valor spn no es una subetiqueta de idioma válida. Los lectores de pantalla no pueden identificar esto como español.
Incorrecto: Nombre completo de idioma en lugar de código
<p>Here is a quote: <q lang="Japanese">素晴らしい</q></p>
El valor Japanese no es un código de idioma BCP 47 válido.
Correcto: Código de idioma de dos letras válido
<p>Welcome to our site. <span lang="es">Bienvenidos a nuestro sitio.</span></p>
El valor es es la subetiqueta de idioma válida para español.
Correcto: Código de idioma válido con subetiqueta regional
<p>The Canadian term is <span lang="fr-CA">dépanneur</span>.</p>
El valor fr-CA identifica correctamente el francés canadiense.
Correcto: Idioma RTL con atributo de dirección
<p>The Arabic word for peace is <span lang="ar" dir="rtl">سلام</span>.</p>
El valor ar es la subetiqueta válida para árabe, y dir="rtl" asegura la direccionalidad correcta del texto.
Correcto: Múltiples cambios de idioma en una página
<p>
In English we say "goodbye," in German it's
<span lang="de">Auf Wiedersehen</span>, and in Japanese it's
<span lang="ja">さようなら</span>.
</p>Cada elemento en línea usa un código de idioma válido, permitiendo al lector de pantalla cambiar motores de pronunciación según sea necesario.
Ayúdanos a mejorar nuestras guías
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.