El atributo lang y los lectores de pantalla
Declare el idioma de la página y de los elementos para una pronunciación correcta
El atributo lang y los lectores de pantalla es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Qué hace el atributo lang
El atributo lang declara el idioma del contenido de un elemento mediante una etiqueta de idioma BCP-47. Los lectores de pantalla lo utilizan para seleccionar el motor y la voz de pronunciación correctos, y los motores de búsqueda lo utilizan para indexar por idioma.
Establecerlo en el elemento html
Toda página debe declarar su idioma principal en el elemento raíz: <html lang="en"> para inglés, <html lang="tr"> para turco y <html lang="ja"> para japonés. Sin este atributo, los lectores de pantalla recurren al idioma predeterminado del sistema del usuario y a menudo pronuncian mal todas las palabras.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>...</title></head>Etiquetas BCP-47
Las etiquetas siguen BCP-47: un código de idioma (en, tr, ja), opcionalmente una región (en-US, en-GB, zh-Hant, zh-Hans) y, rara vez, un sistema de escritura. Use la etiqueta más específica que sea correcta; «en» por sí sola es suficiente cuando la variante ortográfica regional no importa.
Cambios de idioma a mitad de página
Para una sección en un idioma diferente, márquela con su propio atributo lang: <blockquote lang="fr">Bonjour</blockquote>. El lector de pantalla cambia de voz para esa sección, lo que produce una pronunciación precisa incluso en páginas multilingües.
<p>The motto is <span lang="la">Carpe diem</span>, meaning "seize the day".</p>Selectores de idioma en CSS
CSS puede seleccionar el idioma mediante :lang(en): blockquote:lang(fr)::before { content: "« "; }. El selector coincide con el atributo lang del ancestro más cercano. Úselo para convenciones tipográficas, como las comillas y el espaciado, que varían según el idioma.
Por qué es importante para la pronunciación
«Live» en inglés y en francés cambia de pronunciación. «Wir» en alemán se pronuncia «veer», no «wear». Un lector de pantalla configurado para inglés pronunciará mal ambas palabras salvo que se le indique que la sección circundante está en alemán o francés.
hreflang para idiomas enlazados
El atributo hreflang de los enlaces (<a href="/fr/" hreflang="fr">Français</a>) indica a los motores de búsqueda y a las tecnologías de asistencia el idioma de la página enlazada. Combínelo con etiquetas de enlace hreflang en todo el sitio para lograr una cobertura completa del SEO internacional.
Detectar el idioma del usuario
JavaScript puede leer los idiomas preferidos del usuario mediante navigator.languages (un array de etiquetas BCP-47 en orden de prioridad). Úselo para elegir una configuración regional predeterminada o sugerir un cambio de idioma, pero respete siempre la elección explícita del usuario por encima del idioma predeterminado del navegador.
Detección del lado del servidor
El encabezado de solicitud HTTP Accept-Language contiene las preferencias de idioma del usuario obtenidas de la configuración del navegador. Úselo en el servidor para enviar el HTML localizado correcto en la primera solicitud, de modo que el usuario vea su idioma antes de que se ejecute JavaScript.
Varios idiomas en una misma página
Los artículos de Wikipedia, las aplicaciones para aprender idiomas y los diccionarios mezclan idiomas habitualmente. Marque cada fragmento con su propio atributo lang, incluso si es corto. Sin un atributo lang por sección, la voz del lector de pantalla y las comillas CSS vuelven a la configuración predeterminada de la página.
Errores comunes
Omitir lang en <html> (es muy común), usar un código de idioma incorrecto (lang="english" en lugar de lang="en») o utilizar códigos regionales cuando basta con indicar el idioma. Use el validador del W3C y la auditoría de accesibilidad de Lighthouse para detectar estos problemas en CI.
Comprobación de conocimientos
¿Por qué es especialmente importante el atributo lang en para los usuarios de lectores de pantalla?
Resumen
Declare el idioma de la página en <html> mediante una etiqueta BCP-47 (en, tr, ja, zh-Hant). Marque los cambios de idioma a mitad de página con atributos lang en span/section para que los lectores de pantalla cambien de voz. CSS :lang() puede aplicar una tipografía específica para cada idioma. Establezca siempre lang: no cuesta nada y mejora enormemente la pronunciación de los lectores de pantalla, el SEO y la selección en CSS.
Preguntas frecuentes
¿La lección «El atributo lang y los lectores de pantalla» es gratis?
Sí — el texto completo de «El atributo lang y los lectores de pantalla» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «El atributo lang y los lectores de pantalla»?
Declare el idioma de la página y de los elementos para una pronunciación correcta Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «El atributo lang y los lectores de pantalla»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El atributo lang y los lectores de pantalla
- dir=rtl para texto de derecha a izquierda
- Los elementos bdi y bdo
- charset y gestión de Unicode: caracteres especiales