El atributo lang y su importancia en accesibilidad HTML
El atributo lang, del inglés language (idioma), es utilizado para indicar el idioma del contenido de un elemento:
- En elementos no editables indica el idioma en el que está escrito el texto.
- En elementos editables (incluyendo elementos con atributo
contenteditable) indica el idioma en el que debería introducirse el texto.
Aunque es un atributo global y se puede utilizar en cualquier elemento HTML, las especificaciones HTML 5.1 establecen que el atributo lang solo tiene efecto sobre elementos que contengan texto. Esto quiere decir que en elementos que no contienen texto el atributo lang es válido pero no tiene efecto.
¿Cómo se utiliza?
Utilizar el atributo lang es muy sencillo. Cómo cualquier otro atributo, se incluye en la etiqueta del elemento y se utiliza = para asiganrle un valor. Por ejemplo:
<p lang="es">Contenido del párrafo.</p>El valor del atributo lang se rige por el documento BCP47 de la IETF y debe ser una cadena que contenga un identificador de idioma según el estándar ISO 639. Hay dos versiones de este estándar, ISO 639-1 e ISO 639-2, para idiomas que tengan las dos versiones, se elige la versión más corta, generalmente la ISO 639-1.
Por ejemplo, el español es spa en ISO 639-2 y es en ISO 639-1; se utiliza es. Algo similar ocurre con el inlgés, su código ISO 639-2 es eng y se utiliza la versión ISO 639-1, que es en.
<p lang="en">No! Don't jump! Is the Space Pope reptilian!? I've been there. My folks were always on me to groom myself and wear underpants.</p>El atributo lang se puede utilizar en elementos anidados para especificar un idioma diferente al idioma del elemento padre. Por ejemplo, se puede utilizar en el elemento <html> para identificar el idioma de toda la página y luego podemos especificar idiomas diferentes en elementos internos:
<!doctype html>
<html lang="es">
....
<body>
<p>Esta página esta escrita en español.</p>
<p lang="en">But this paragraph is written in english.</p>
<p>Customizar, del inglés <span lang="en">customize</span>, que significa personalizar.</p>
</body>
</html>Además, se pueden componer identificadores específicos para variantes de idioma, generalmente variantes regionales. Basta con utilizar el código ISO 639-1 o 2, que se conoce como la «etiqueta de idioma», seguido de un guión - y luego el identificador de variante, que se conoce como «subetiqueta de idioma». La lista de subetiquetas es mantenida en el registro de subetiquetas de idioma de IANA (Internet Assigned Numbers Authority).
{etiqueta ISO 639-1/2}-{subetiqueta IANA}Por ejemplo, es-ES sería para el español de España, en-GB para el inglés de Reino Unido y fr-CA para el francés de Canadá.
<!doctype html>
<html lang="es-ES">
....
<body>
<p>Esta página esta escrita en español de España.</p>
</body>
</html>¿Por qué se debe utilizar?
Es muy normal que pongamos el atributo lang en el <html>, si es que lo ponemos, y nos olvidamos. Pero no sólo tenemos que acordarnos siempre de ponerlo en el <html> para especificar el idioma general del documento, si dentro hay contenido en un idioma diferente al declarado en el <html>, aunque sea una sola palabra, hay que volver a utilizar el atributo lang.
Entre las muchas razones, algunas de las que creo más importantes son:
Asistentes de navegación
Algunos asistentes de navegación, como los lectores de pantalla que utilizan sintetizadores de voz o los traductores Braille, tienen como objetivo reproducir el contenido escrito en otro formato que pueda ser utilizado por el usuario.
Para producir los mejores resultados, el asistente de navegación necesita conocer el idioma en el que está escrito el texto, o, en el caso de elementos editables, el idioma en el que el usuario debería introducir el contenido.
Por ejemplo, un sintetizador de voz suele tener programados varios idiomas, incluyendo variantes regionales junto a sus acentos y dicciones. Gracias a la información proporcionada por el atributo lang, el sintetizador puede saber si tiene que pasar a utilizar otro idioma o no.
En el siguiente vídeo se puede escuchar una demostración de un lector de pantalla leyendo una frase escrita en francés, primero con un atributo lang incorrecto (en) y luego con el correcto (fr):
Debido a este uso por asistentes de navegación y sus implicaciones en accesibilidad, el atributo lang es recomendando en las guías de accesibilidad de la W3C. Ten esto siempre presente.
Selección de tipografía
Los navegadores, y user-agents en general, pueden utilizar la información del atributo lang para seleccionar una tipografía adecuada para representar el texto según el idioma. Algunos idiomas comparten glifos muy similares pero solo si el navegador conoce el idioma utilizado, podrá elegir la fuente que contenga el glifo que represente el texto de la mejor forma.
Traductores y correctores ortográficos
Bueno, que decir, si los user-agents pueden elegir la tipografía adecuada y los sintetizadores de voz pueden cambiar de pronunciación, los traductores y correctores ortográficos simplemente no pueden realizar su trabajo correctamente si no saben el idioma del que están traduciendo o que están corrigiendo.
Implicaciones en CSS y renderizado de texto
Cuándo un elemento tiene el atributo lang, se le puede aplicar el pseudo selector :lang. Por ejemplo, se podría utilizar para especificar una determinada tipografía según el idioma:
body {
font-family: Roboto, Lato, serif;
}
/* Para el árabe (elementos con atributo lang="ar") */
:lang(ar) {
font-family: "Droid Arabic Naskh", Amiri, serif;
}Además, cada idioma tienes unas propiedades diferentes en algunos signos de puntuación.
Un buen ejemplo lo tenemos en la ruptura de palabras con guión al final de una línea. Cada idioma tiene sus reglas para definir dónde se debe hacer esa ruptura. En español, por ejemplo, se hace una ruptura silábica y, en palabras compuestas, también ruptura morfológica. El navegador necesita conocer el idioma del texto para poder decidir donde romper una palabra si es necesario.
Derivado de lo anterior, el atributo lang afecta a algunas propiedades CSS, por ejemplo hyphen: auto solo funciona si el elemento al que se le aplica tiene definido el atributo lang (aunque sea heredado de un elemento padre).
Otro buen ejemplo lo tenemos en los símbolos de puntuación que utiliza cada idioma para representar citas en línea, que se corresponden con el elemento <q> en HTML. Al utilizar el elemento <q> no se debe utilizar ningún signo de puntuación, por ejemplo " o <<, sino que debe ser introducido por el user-agent, y lo hará según el idioma. Si queremos modificarlo lo podemos hacer con CSS:
/* General para todos los elementos q */
q:before { content: open-quote; }
q:after { content: close-quote; }
/* Inglés */
:lang(en) q { quotes: '“' '”'; }
/* Francés */
:lang(fr) q { quotes: '«' '»'; }
/* Alemán */
:lang(de) q { quotes: '»' '«'; }Posibles implicaciones en SEO
No hay nadie (yo no he encontrado a nadie quiero decir) que pueda demostrar con datos que el uso el atributo lang afecta positivamente al posicionamiento en buscadores. La mayoría de buscadores ya son capaces de detectar el idioma de una página de forma automática, probablemente el atributo lang establecido en la etiqueta <html> global no tenga mucho efecto en el SEO, si es que tiene alguno.
Al menos Google lo ignora para esto fines, pero ojo, no se debe confundir con el atributo hreflang de los enlaces alternativos que indican las versiones en diferentes idiomas de un mismo documento HTML. El atributo lang y el atributo hreflang de los enlaces son dos cosas diferentes.