Volver a la guía

Grave WCAG 2.0 · 3.1.1 axe-core: html-has-lang

Idioma de la página

¿Qué problema resuelve el atributo lang?

Los lectores de pantalla usan la síntesis de voz para leer el contenido. Para pronunciar correctamente las palabras, necesitan saber en qué idioma están escritas. Un lector de pantalla configurado en inglés que lee un texto en catalán sin indicación de idioma intentará pronunciar las palabras catalanas con fonología inglesa. El resultado es completamente incomprensible.

El criterio WCAG 3.1.1 exige que el idioma principal de cada página pueda ser determinado programáticamente. El atributo lang al elemento <html> es la manera estándar de cumplir este criterio.

Cómo se especifica el idioma

<!-- Català -->
<html lang="ca">

<!-- Castellà -->
<html lang="es">

<!-- Anglès -->
<html lang="en">

<!-- Català de la Comunitat Valenciana -->
<html lang="ca-ES">

Cambios de idioma dentro del contenido

Si tu web tiene contenido en múltiples idiomas dentro de una misma página, tienes que indicar los cambios de idioma con el atributo lang al elemento que contiene el contenido en idioma diferente:

<p>El nostre lema és <span lang="en">accessibility for all</span>.</p>

Esto permite al lector de pantalla cambiar automáticamente la pronunciación cuando cambia el idioma.

WordPress y el atributo lang

WordPress gestiona automáticamente el atributo lang si el idioma del lugar está configurado correctamente. Ve a Ajustes → General → Idioma del lugar y selecciona el idioma correspondiente. WordPress añadirá el atributo lang correcto al <html>.

Si el teu tema usa una plantilla personalitzada que no hereta la configuració d’idioma de WordPress, potser cal revisar que el fitxer header.php inclogui la funció language_attributes() de WordPress:

<html <?php language_attributes(); ?>>

Valor inválido de lang

Axe-core comprueba dos cosas: que el atributo lang exista (html-has-lang) y que el valor sea válido (html-lang-valid). Un valor como lang="catala" o lang="cat" no es válido. Hay que usar los códigos BCP 47 estándar: ca para el catalán, es para el castellano, en para el inglés, fr para el francés, etc.

Puedes verificar el valor del lang de tu web con la herramienta de autoevaluación de webaccessible.cat, que comprueba tanto la existencia como la validez del código de idioma.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

M