Atributo lang: confira o idioma da página e dos trechos

O atributo lang identifica o idioma de um elemento HTML. Numa página predominantemente em português do Brasil, confira a declaração lang="pt-BR" no elemento html. Quando houver um trecho em outro idioma, indique a mudança no elemento que contém esse trecho. Depois, verifique se a marcação permaneceu correta na página publicada.

Essa conferência ajuda quem publica ou revisa conteúdo a entregar uma informação que a aparência da página não revela. O guia prático de SEO organiza a revisão do site. Neste artigo, aprofundamos a declaração de idioma, com um exemplo próprio de herança e um roteiro para registrar o que foi efetivamente conferido.

Por que declarar o idioma da página

Um texto pode aparecer normalmente na tela mesmo quando sua declaração de idioma está ausente ou incorreta. Na explicação do critério 3.1.1 das WCAG 2.2, o W3C relaciona a identificação programática do idioma predominante ao processamento do conteúdo por navegadores e tecnologias assistivas. Essa informação pode ajudar um leitor de tela a selecionar regras de pronúncia apropriadas.

O critério 3.1.1 é de nível A. Identificar corretamente o idioma atende a uma necessidade específica; não comprova, isoladamente, a acessibilidade de toda a página. Estrutura de títulos, navegação, imagens, formulários e outros componentes também precisam de avaliação conforme o conteúdo disponível.

No HTML, html é o elemento que envolve o documento. Se o conteúdo predominante corresponde ao português do Brasil, a abertura pode ser <html lang="pt-BR">. Essa linha pertence à estrutura da página. Não cole um segundo elemento html dentro do texto de uma publicação.

Entenda até onde a declaração se aplica

A referência da MDN sobre lang explica que o atributo recebe uma etiqueta de idioma BCP 47, padrão de identificação usado nesse contexto. Na ausência de uma declaração própria, o elemento herda o idioma de seu elemento pai. Por isso, confira também os elementos que envolvem o trecho, em vez de examinar apenas o parágrafo isolado.

Use o idioma que corresponde ao conteúdo. No exemplo deste artigo, pt-BR identifica português do Brasil e en identifica inglês sem especificar uma variedade regional. Um atributo vazio, como lang="", declara idioma desconhecido e não serve como correção de preenchimento. Se não souber qual etiqueta usar para outro idioma, confirme-a antes de publicar.

L041 · Contêiner em português

Um div com lang=”pt-BR” envolve os três parágrafos irmãos. Exemplo didático próprio.

1 · Parágrafo em português

Sem lang próprio. Herda pt-BR do contêiner.

2 · Parágrafo em inglês

Declara lang=”en”. Muda o idioma apenas nesse parágrafo e nos seus descendentes.

3 · Próximo parágrafo em português

Sem lang próprio. Herda pt-BR do contêiner. A declaração do parágrafo irmão anterior não se estende a ele.

Como conferir

Examine os atributos e os elementos que envolvem cada trecho na página publicada. O esquema não comprova pronúncia nem acessibilidade completa.

Descrição da figura

Exemplo próprio L041: um div com lang pt-BR envolve três parágrafos irmãos. Primeiro: Confira o pedido antes de enviar, sem lang próprio, herda pt-BR. Segundo: frase em inglês com lang en, que muda o idioma apenas nesse parágrafo e nos seus descendentes. Terceiro: Depois, registre a confirmação, sem lang próprio, herda pt-BR do div. A declaração do segundo parágrafo não é transmitida ao parágrafo irmão seguinte. O exemplo apresenta a marcação de idioma, sem pedido real, cliente, teste de pronúncia ou avaliação completa de acessibilidade. As frases completas com a marcação aplicada e o modelo de código aparecem no texto do artigo. No celular, o esquema é recomposto em cartões HTML.

Exemplo próprio: português, trecho em inglês e retorno

Exemplo didático L041: um bloco traz uma orientação em português, apresenta sua versão em inglês e continua em português. As frases foram criadas para mostrar a marcação, sem representar pedido, cliente ou procedimento de uma empresa real. O contêiner declara pt-BR; apenas o segundo parágrafo declara en.

<div lang="pt-BR">
  <p>Confira o pedido antes de enviar.</p>
  <p lang="en">Please review the order before sending it.</p>
  <p>Depois, registre a confirmação.</p>
</div>

O primeiro e o terceiro parágrafos herdam pt-BR do contêiner. A declaração en fica restrita ao segundo parágrafo e aos seus descendentes. Ela não muda o idioma dos parágrafos irmãos que vêm depois. O bloco abaixo apresenta as mesmas frases com essa marcação aplicada.

Quando marcar uma mudança de idioma no texto

O critério 3.1.2 das WCAG 2.2, de nível AA, trata do idioma das passagens e frases. Há exceções para nomes próprios, termos técnicos, palavras de idioma indeterminado e expressões incorporadas ao uso do idioma ao redor. Portanto, não transforme toda marca ou palavra emprestada em uma mudança automática.

Comece pelos trechos em que existe uma mudança clara, como uma instrução completa em inglês numa página em português. Se for apenas parte de um parágrafo, um elemento que envolva essa passagem, como span, pode receber o atributo. Confira o início e o fim do trecho marcado para não incluir acidentalmente o restante da frase.

A mesma referência do W3C registra limitações de tecnologias assistivas em certos modos de leitura. Assim, uma avaliação não deve se apoiar somente no áudio: examine a marcação. A conferência do exemplo aqui é de estrutura e atributos; não representa teste de pronúncia com leitor de tela.

Confira a versão publicada, não apenas o campo do editor

Abra a página pública e compare o idioma predominante com o conteúdo que o leitor encontra. Nas ferramentas de inspeção do navegador, localize o elemento html e leia o atributo lang. Depois, selecione o trecho em outro idioma e examine seu elemento e os elementos que o envolvem. Os nomes dos comandos de inspeção variam entre navegadores.

No L041, procure o contêiner l041-contexto e os três parágrafos identificados no bloco aplicado. O resultado esperado é português, inglês e português. Uma verificação apenas visual não distingue esse resultado de três parágrafos sem declaração: é preciso observar os atributos e a herança.

Se o erro estiver na declaração geral de html, encaminhe a correção a quem administra a estrutura do site. Em um sistema de publicação, essa declaração pode depender da configuração ou da geração da página. Um trecho marcado dentro do artigo não corrige sozinho um idioma geral incorreto. Faça a mudança no ponto responsável, dentro de um escopo autorizado, e confira novamente a URL pública.

URL e data da conferência:
Idioma predominante do conteúdo:
Valor de lang no elemento html:
Trecho em outro idioma e sua localização:
Elemento que envolve o trecho:
Valor próprio de lang, se houver:
Declaração herdada mais próxima:
Idioma esperado do conteúdo seguinte:
Diferença encontrada:
Responsável e escopo da correção:
Estado depois de salvar e publicar:
Evidência da nova conferência:
Teste com tecnologia assistiva realizado e ambiente:
Limites e pendências:

Diferencie lang, tradução e hreflang

Declarar lang informa o idioma do texto; não traduz as frases nem cria uma versão em outro idioma. No L041, a frase inglesa já foi escrita em inglês. Mudar apenas o atributo de um parágrafo em português para en deixaria uma declaração incompatível com seu conteúdo.

O Google explica que identifica o idioma pelo conteúdo visível, sem usar lang ou a URL para essa identificação. A mesma documentação apresenta hreflang para relacionar versões de páginas por idioma ou região. São funções diferentes: uma declaração no parágrafo não cria a relação entre versões.

Quando houver versões traduzidas, confira conteúdo, navegação e os links pelos quais o leitor escolhe o idioma. Não anuncie uma versão inexistente. O uso correto de lang não garante posição na busca nem citação por sistemas de IA. Para organizar outra parte da estrutura do conteúdo, veja como conferir a hierarquia de títulos H1, H2 e H3.

Perguntas frequentes sobre atributo lang

O atributo lang traduz o conteúdo?

Não. Ele identifica o idioma. A tradução precisa existir no texto; mudar o atributo sem traduzir pode deixar a declaração incompatível com o conteúdo.

Preciso repetir lang em todos os parágrafos?

Não. Um elemento sem declaração própria herda o idioma do elemento pai. Confira essa herança e marque as mudanças de idioma quando forem necessárias.

Lang e hreflang têm a mesma função?

Não. Lang declara o idioma de um elemento. Hreflang pode relacionar versões de páginas por idioma ou região, conforme a implementação. Um não substitui o outro.

Lang correto comprova a acessibilidade da página?

Não. A declaração de idioma é uma das verificações. A avaliação precisa considerar os outros componentes da página e registrar o ambiente e os limites dos testes realizados.

Se sua equipe precisa organizar a revisão de conteúdo e estrutura do site, converse conosco sobre o planejamento dessa revisão. Podemos ajudar a delimitar páginas, critérios e responsáveis. Alterações de configuração e implantação precisam de escopo próprio.