O atributo lang e os leitores de tela
Declare o idioma da página e dos elementos para obter a pronúncia correta.
O atributo lang e os leitores de tela é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
O que o atributo lang faz
O atributo lang declara o idioma do conteúdo de um elemento usando uma etiqueta de idioma BCP-47. Os leitores de tela usam essa informação para selecionar o mecanismo e a voz de pronúncia corretos, e os mecanismos de pesquisa a usam para indexar por idioma.
Definindo no elemento html
Toda página deve declarar seu idioma principal na raiz: <html lang="en"> para inglês, <html lang="tr"> para turco, <html lang="ja"> para japonês. Sem essa declaração, os leitores de tela recorrem ao padrão do sistema do usuário e frequentemente pronunciam todas as palavras de forma incorreta.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>...</title></head>Etiquetas BCP-47
As etiquetas seguem BCP-47: código do idioma (en, tr, ja), opcionalmente uma região (en-US, en-GB, zh-Hant, zh-Hans) e, raramente, um sistema de escrita. Use a etiqueta mais específica que seja correta; somente "en" é suficiente quando a ortografia regional não importa.
Mudanças de idioma no meio da página
Para uma seção em outro idioma, marque-a com seu próprio atributo lang: <blockquote lang="fr">Bonjour</blockquote>. O leitor de tela troca de voz nessa seção, produzindo uma pronúncia correta mesmo em páginas multilíngues.
<p>The motto is <span lang="la">Carpe diem</span>, meaning "seize the day".</p>Seletores de idioma em CSS
CSS pode selecionar um idioma por meio de :lang(en): blockquote:lang(fr)::before { content: "« "; }. O seletor corresponde ao atributo lang do ancestral mais próximo. Use-o para convenções tipográficas, como aspas e espaçamento, que variam conforme o idioma.
Por que isso importa para a pronúncia
"Live" em inglês e em francês tem pronúncias diferentes. "Wir" em alemão é pronunciado "veer", não "wear". Um leitor de tela configurado para inglês pronunciará ambas as palavras incorretamente, a menos que seja informado de que a seção ao redor está em alemão ou francês.
hreflang para idiomas vinculados
O atributo hreflang nos links (<a href="/fr/" hreflang="fr">Français</a>) informa aos mecanismos de pesquisa e às tecnologias assistivas o idioma da página vinculada. Combine-o com etiquetas de link hreflang em todo o site para obter uma cobertura completa de SEO internacional.
Detectando o idioma do usuário
JavaScript pode ler os idiomas preferidos do usuário em navigator.languages (uma matriz de etiquetas BCP-47 na ordem de prioridade). Use isso para escolher uma localidade padrão ou sugerir uma troca de idioma — mas sempre respeite a escolha explícita do usuário em vez do padrão do navegador.
Detecção no servidor
O cabeçalho de solicitação HTTP Accept-Language lista as preferências de idioma do usuário definidas na configuração do navegador. Use-o no servidor para enviar o HTML localizado correto na primeira solicitação, para que o usuário veja seu idioma antes que qualquer JavaScript seja executado.
Vários idiomas em uma página
Artigos da Wikipédia, aplicativos de aprendizado de idiomas e dicionários misturam idiomas regularmente. Marque cada trecho com seu próprio atributo lang, mesmo os mais curtos. Sem o atributo lang em cada seção, a voz do leitor de tela e as aspas do CSS voltam ao padrão da página.
Erros comuns
Não definir lang em <html> (muito comum), usar o código de idioma errado (lang="english" em vez de lang="en") ou usar códigos regionais quando somente o idioma seria suficiente. Use o validador do W3C e a auditoria de acessibilidade do Lighthouse para detectar esses problemas na integração contínua.
Verificação de conhecimento
Por que o atributo lang em <html> é particularmente importante para usuários de leitores de tela?
Resumo
Declare o idioma da página em <html> usando uma etiqueta BCP-47 (en, tr, ja, zh-Hant). Marque mudanças de idioma no meio da página com atributos lang em span/section para que os leitores de tela troquem de voz. :lang() do CSS pode aplicar tipografia específica para cada idioma. Sempre defina lang — isso não custa nada e melhora significativamente a pronúncia dos leitores de tela, o SEO e a seleção por CSS.
Perguntas Frequentes
A aula “O atributo lang e os leitores de tela” é grátis?
Sim — o texto completo de “O atributo lang e os leitores de tela” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “O atributo lang e os leitores de tela”?
Declare o idioma da página e dos elementos para obter a pronúncia correta. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “O atributo lang e os leitores de tela”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- O atributo lang e os leitores de tela
- dir=rtl para texto da direita para a esquerda
- Os elementos bdi e bdo
- charset e tratamento de Unicode: caracteres especiais