Acerca de esta regla de accesibilidad
Los lectores de pantalla dependen de librerías de sonido distintas para cada idioma, con reglas de pronunciación, patrones de entonación y fonética adaptados a ese idioma específico. Cuando un usuario navega a una página, el lector de pantalla verifica el atributo lang en el elemento <html> para determinar qué librería de sonido cargar. Si no hay un atributo lang presente, el lector de pantalla recurre al idioma predeterminado que el usuario configuró durante la instalación. Para alguien que habla varios idiomas y navega por sitios web en diferentes idiomas, esto crea un problema serio: el lector de pantalla intentará leer contenido en idioma extranjero usando las reglas de pronunciación incorrectas, produciendo un habla confusa o incomprensible.
Este problema afecta principalmente a usuarios ciegos y sordociegos que dependen de lectores de pantalla, pero también impacta a usuarios con discapacidades cognitivas que pueden usar herramientas de texto a voz. Cuando el texto se lee en voz alta con las reglas de idioma incorrectas, incluso palabras simples se vuelven irreconocibles, haciendo efectivamente que el contenido sea inaccesible.
Criterios de éxito WCAG relacionados
Esta regla se corresponde con WCAG 2.0, 2.1, y 2.2 Criterio de Éxito 3.1.1: Idioma de la página en Nivel A — el nivel más fundamental de conformidad. Este criterio requiere que el idioma humano predeterminado de cada página web pueda ser determinado programáticamente. También es referenciado por las directrices Trusted Tester (11.A), EN 301 549, y RGAA.
Cómo solucionarlo
Añade un atributo lang con un código de idioma válido al elemento de apertura <html>. El valor debe representar el idioma principal del contenido de la página.
Puedes usar un código de idioma simple de dos letras (como en para inglés, fr para francés, o de para alemán), o puedes ser más específico con un código de dialecto regional como en-US para inglés americano o fr-CA para francés canadiense. Una lista completa de subetiquetas de idioma válidas está disponible en el IANA Language Subtag Registry.
Si secciones de tu página contienen contenido en un idioma diferente al principal, usa el atributo lang en esos elementos específicos para que los lectores de pantalla puedan cambiar librerías de sonido a mitad de página.
Para idiomas escritos de derecha a izquierda (como árabe o hebreo), también incluye el atributo dir con un valor de rtl para indicar la dirección del texto.
Ejemplos
Incorrecto: Atributo lang faltante
Esto activará la regla porque el elemento <html> no tiene atributo lang:
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
Correcto: Atributo lang con un código de idioma válido
<html lang="en">
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>Correcto: Usando un código de dialecto regional
<html lang="en-US">
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>Correcto: Manejando cambios de idioma en línea
Cuando una porción de la página está en un idioma diferente, usa el atributo lang en el elemento contenedor:
<html lang="en">
<head>
<title>My Website</title>
</head>
<body>
<p>The French word for hello is <span lang="fr">bonjour</span>.</p>
</body>
</html>
Correcto: Idioma de derecha a izquierda con atributo dir
<html lang="ar" dir="rtl">
<head>
<title>موقعي</title>
</head>
<body>
<h1>مرحبا</h1>
</body>
</html>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.