Acerca de esta regla de accesibilidad
Los lectores de pantalla dependen de bibliotecas de sonido específicas del idioma para pronunciar el texto con precisión. Cada idioma tiene sus propias reglas de pronunciación, patrones de entonación y características fonéticas, por lo que los lectores de pantalla cargan la biblioteca apropiada basándose en el idioma declarado del documento. Cuando el elemento <html> no tiene un atributo lang o contiene un valor inválido — como un error ortográfico o un código inventado — el lector de pantalla no puede determinar qué biblioteca usar. Recurre por defecto al idioma que el usuario configuró durante la instalación, lo que significa que el contenido escrito en francés podría ser leído en voz alta usando las reglas de pronunciación del inglés. El resultado es un habla que suena como un acento confuso e ininteligible.
Este problema afecta principalmente a usuarios ciegos y usuarios sordociegos que dependen de lectores de pantalla, pero también impacta a usuarios con discapacidades cognitivas que pueden usar herramientas de texto a voz para ayudar en la comprensión. Cuando la pronunciación es incorrecta, la comprensión disminuye drásticamente.
Criterios de éxito WCAG relacionados
Esta regla se corresponde 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 ser determinado programáticamente. Este es un requisito de Nivel A — el nivel más fundamental de accesibilidad — lo que significa que debe satisfacerse para el cumplimiento básico bajo WCAG 2.0, 2.1 y 2.2. También es requerido por la metodología Trusted Tester, EN 301 549 y RGAA.
Cómo solucionarlo
-
Añade un atributo
langal elemento de apertura<html>. - Establece su valor a una etiqueta de idioma BCP 47 válida que represente el idioma principal de la página.
-
Verifica la ortografía del código de idioma. Los códigos válidos comunes incluyen
"en"(inglés),"fr"(francés),"es"(español),"de"(alemán),"ja"(japonés) y"ar"(árabe). -
Opcionalmente puedes incluir una subetiqueta regional, como
"en-US"para inglés americano o"fr-CA"para francés canadiense. -
Para documentos XHTML servidos como XML, usa
xml:langen lugar de o además delang.
Si el idioma cambia dentro del documento para pasajes específicos, usa el atributo lang en el elemento apropiado para indicar el cambio. Para idiomas de derecha a izquierda, también incluye el atributo dir="rtl".
Ejemplos
Incorrecto: Falta el atributo lang
<html>
<head>
<title>My Page</title>
</head>
<body>
<p>Welcome to my website.</p>
</body>
</html>
Sin un atributo lang, los lectores de pantalla no pueden determinar el idioma de la página y recurrirán por defecto al idioma configurado del usuario, que puede no coincidir con el contenido.
Incorrecto: Valor lang inválido
<html lang="english">
<head>
<title>My Page</title>
</head>
<body>
<p>Welcome to my website.</p>
</body>
</html>
El valor "english" no es una etiqueta de idioma BCP 47 válida. El código correcto para inglés es "en".
Correcto: Atributo lang válido
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>Welcome to my website.</p>
</body>
</html>Correcto: Subetiqueta regional
<html lang="fr-CA">
<head>
<title>Ma page</title>
</head>
<body>
<p>Bienvenue sur mon site web.</p>
</body>
</html>Correcto: Cambio de idioma dentro de la página
<html lang="en">
<head>
<title>Multilingual Page</title>
</head>
<body>
<p>This paragraph is in English.</p>
<p lang="es">Este párrafo está en español.</p>
</body>
</html>Correcto: Idioma de derecha a izquierda
<html lang="ar" dir="rtl">
<head>
<title>صفحتي</title>
</head>
<body>
<p>مرحبا بكم في موقعي.</p>
</body>
</html>
El atributo dir="rtl" asegura que la dirección del texto se renderice correctamente para idiomas de derecha a izquierda como el árabe y el hebreo.
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.