Técnica HTML WCAG 2.2
H57Usar el atributo de idioma en el elemento html
En resumen
Esta técnica pide declarar el idioma principal de la página con el atributo lang en el elemento html (por ejemplo, lang="es"). Con ello, los lectores de pantalla eligen la voz y la pronunciación correctas, el software de transcripción braille aplica las reglas adecuadas y los traductores automáticos y diccionarios funcionan mejor. Es una de las comprobaciones más sencillas y debe aplicarse en todas las páginas de un sitio web.
Ejemplo práctico
El idioma de la página se declara una sola vez, en la plantilla base del sitio (tema de WordPress, maqueta del CMS, index.html de una aplicación de React o Vue). Es habitual encontrar el elemento html sin lang o con el valor en inglés que traía la plantilla.
Así no: Página en español sin atributo lang
El elemento html no indica el idioma. El lector de pantalla lee el contenido con la voz configurada por defecto: si el usuario la tiene en inglés o en catalán, «Pedir cita previa» se pronuncia con fonética de otro idioma. Los traductores automáticos y los correctores ortográficos tampoco saben en qué idioma está el texto.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pedir cita previa – Ayuntamiento de Villanueva</title>
</head>
<body>
<h1>Pedir cita previa</h1>
<p>Seleccione el trámite y la oficina donde desea ser atendido.</p>
</body>
</html>Así sí: Idioma principal declarado en el elemento html
Se añade lang="es" al elemento html. El valor es una etiqueta BCP 47 válida y corresponde al idioma real del contenido, así que el lector cambia a la voz española y el navegador ofrece la traducción y la división silábica correctas.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Pedir cita previa – Ayuntamiento de Villanueva</title>
</head>
<body>
<h1>Pedir cita previa</h1>
<p>Seleccione el trámite y la oficina donde desea ser atendido.</p>
</body>
</html>Cómo comprobarlo
Errores frecuentes en auditorías
- Temas y plantillas que traen
lang="en"olang="en-US"fijo y se usan sin cambiar en sitios en español. - Valores que no cumplen BCP 47:
lang="sp",lang="es_ES"(con guion bajo) olang="spanish". - Sitios multilingües en los que las páginas en catalán, euskera o inglés conservan
lang="es"porque el atributo está escrito a mano en la cabecera de la plantilla. - Poner el atributo en
bodyo en un contenedor en lugar de en el elementohtml, con lo que el título del documento queda sin idioma.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
HTML
Descripción
El objetivo de esta técnica es identificar el idioma predeterminado de un documento proporcionando el atributo lang en el elemento html.
Identificar el idioma del documento es importante por varias razones:
- Permite que el software de transcripción braille sustituya los caracteres acentuados por códigos de control e inserte los códigos de control necesarios para evitar la creación errónea de contracciones del braille de grado 2.
- Los sintetizadores de voz que admiten varios idiomas podrán orientarse y adaptarse a la pronunciación y la sintaxis propias del idioma de la página, leyendo el texto con el acento apropiado y la pronunciación correcta.
- Marcar el idioma puede beneficiar a futuros avances tecnológicos; por ejemplo, los usuarios que no puedan traducir por sí mismos entre idiomas podrán usar máquinas para traducir idiomas que no conocen.
- Marcar el idioma también puede ayudar a los agentes de usuario a proporcionar definiciones mediante un diccionario.
Ejemplos
Definir que el contenido de un documento HTML está en francés
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>document écrit en français</title>
</head>
<body>
... document écrit en français ...
</body>
</html>Pruebas
Procedimiento
Examinar el elemento html del documento.
- Comprobar que el elemento
htmltiene un atributolang. - Comprobar que el valor del atributo
langse ajusta a BCP 47: Tags for Identifying Languages; Matching of Language Tags o a su sucesor, y que refleja el idioma principal usado en la página web.
Resultados esperados
- Las comprobaciones n.º 1 y n.º 2 son verdaderas.
Recursos
-
HTML: los atributos
langyxml:lang. -
El atributo «
lang» de HTML en Mozilla Developer Network. - BCP 47: Tags for Identifying Languages; Matching of Language Tags (etiquetas para identificar idiomas).
- Language tags in HTML and XML (etiquetas de idioma en HTML y XML).
- Declaring language in HTML (declarar el idioma en HTML)
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica H57 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
