WCAG 3.1.1: Idioma da página

WCAG 3.1.1 exige que o idioma humano padrão de cada página da web possa ser determinado de forma programática, principalmente definindo um atributo lang válido no elemento HTML. Isso permite que tecnologias assistivas, como leitores de tela, pronunciem o conteúdo corretamente e ajuda usuários com deficiências cognitivas e relacionadas à linguagem a compreender a página.

O que Esta Regra Significa

WCAG 3.1.1 — Idioma da Página é um critério de sucesso de Nível A sob o princípio Compreensível. Ele exige que o idioma humano principal de cada página da web seja exposto de uma forma que as tecnologias assistivas possam detectar de maneira programática. Na prática, isso quase sempre significa colocar um atributo lang válido diretamente no elemento <html> da página.

O valor do atributo lang deve ser uma tag de idioma BCP 47 válida. Tags BCP 47 consistem em um subtipo de idioma primário (como en para inglês, tr para turco, fr para francês) e, opcionalmente, um subtipo de região separado por um hífen (como en-US, tr-TR ou pt-BR). A tag de idioma deve refletir com precisão o idioma dominante em que o conteúdo da página está escrito. Uma página escrita principalmente em turco deve declarar lang='tr' ou lang='tr-TR'; uma página escrita em inglês deve declarar lang='en' ou uma variante regional.

Uma página passa este critério quando o elemento <html> carrega um atributo lang cujo valor é uma tag de idioma BCP 47 sintaticamente válida e não vazia que identifica corretamente o idioma principal da página. Uma página falha quando o atributo lang está totalmente ausente, quando o valor está vazio (lang='') ou quando o valor não é uma tag de idioma BCP 47 reconhecida (por exemplo, lang='turkish' ou lang='en_US' com um sublinhado em vez de um hífen).

Para páginas XHTML servidas com um tipo MIME XML, tanto o atributo lang quanto o atributo de namespace XML xml:lang devem estar presentes, e seus valores devem coincidir. Uma discrepância entre os dois — como lang='en' junto com xml:lang='tr' — constitui uma falha tanto deste critério quanto da regra relacionada do axe-core html-xml-lang-mismatch.

As WCAG observam explicitamente uma exceção: se a página for puramente decorativa, for um CAPTCHA que intencionalmente não tem idioma discernível ou consistir inteiramente de conteúdo não linguístico (como uma página que é apenas uma imagem sem texto), ela pode não ter um idioma determinável. No entanto, essa exceção é restrita, e a grande maioria das páginas do mundo real contém texto suficiente para exigir uma declaração de idioma.

Por Que Isso Importa

Os principais beneficiários de um idioma de página corretamente declarado são usuários de leitores de tela, a maioria dos quais é cega ou tem baixa visão severa. Leitores de tela como NVDA, JAWS e VoiceOver usam o atributo lang para selecionar a voz e o mecanismo de pronúncia de conversão de texto em fala (TTS) apropriados. Quando uma pessoa usuária turca visita uma página que declara corretamente lang='tr', seu leitor de tela muda para uma voz TTS em turco, aplicando fonologia, padrões de acentuação e diacríticos corretos do turco. Sem essa declaração, um leitor de tela pode assumir como padrão o idioma do sistema da pessoa usuária ou um idioma completamente incorreto, produzindo uma pronúncia semelhante a um amontoado de sons sem sentido que torna o conteúdo incompreensível.

Considere um cenário concreto: uma cidadã turca com deficiência visual visita o site de uma instituição pública para baixar um formulário governamental. O site omite o atributo lang. A instalação de NVDA da pessoa usuária assume como padrão um perfil TTS em inglês. Palavras turcas são lidas usando a fonologia do inglês — palavras como "şehir" (cidade) ou "başvuru" (requerimento) tornam-se irreconhecíveis. A pessoa usuária não consegue preencher o formulário sem assistência de alguém vidente, frustrando todo o propósito do serviço digital.

Pessoas com deficiências cognitivas e de aprendizagem também se beneficiam. Navegadores usam o atributo lang para oferecer sugestões de tradução precisas; algumas pessoas com dislexia dependem de ferramentas de tradução baseadas no navegador para converter o conteúdo em um idioma que consideram mais fácil de processar. Um atributo lang incorreto ou ausente faz com que essas ferramentas identifiquem erroneamente o idioma de origem, produzindo traduções ruins ou nenhuma oferta de tradução.

Pessoas com deficiências motoras que dependem de software de controle por voz, como Dragon NaturallySpeaking, dependem de o software interpretar corretamente o idioma de uma página para corresponder comandos falados ao texto na tela. Um idioma de página identificado incorretamente quebra essa correspondência.

Além da acessibilidade, há benefícios de SEO tangíveis: mecanismos de busca usam o atributo lang como um de vários sinais para determinar o idioma e a região-alvo de uma página, melhorando a precisão dos resultados de busca localizados. A marcação correta de idioma também melhora a confiabilidade dos recursos de verificação ortográfica e gramatical do navegador para todas as pessoas usuárias, não apenas aquelas que usam tecnologia assistiva. De acordo com a Organização Mundial da Saúde, aproximadamente 2,2 bilhões de pessoas no mundo têm algum tipo de deficiência visual, uma parte significativa das quais depende de leitores de tela — o que torna a declaração correta de idioma uma das melhorias de acessibilidade de maior impacto e menor esforço disponíveis.

Regras Relacionadas do Axe-core

html-has-lang — Esta regra verifica se o elemento <html> tem um atributo lang. Ela sinaliza qualquer página em que o atributo lang esteja completamente ausente da tag raiz <html>, independentemente de o atributo aparecer em outro lugar no documento. Esta é uma das detecções automatizadas mais comuns e mais impactantes, porque a correção é a adição de um único atributo.
html-lang-valid — Esta regra verifica se o valor do atributo lang no elemento <html> é uma tag de idioma BCP 47 válida. Ela sinaliza valores que não são códigos de idioma reconhecidos, como lang='turkish' (que usa o nome completo em inglês em vez do código ISO 639-1 tr), lang='en_US' (que usa um sublinhado como separador em vez de um hífen) ou lang='xx' (um marcador sem idioma atribuído). Um atributo lang que existe, mas contém um valor inválido, é tão problemático quanto um atributo ausente, porque as tecnologias assistivas não podem agir de forma confiável com base nele.
html-xml-lang-mismatch — Esta regra se aplica especificamente a páginas XHTML que carregam tanto um atributo lang quanto um atributo xml:lang no elemento <html>. Ela sinaliza casos em que os dois atributos especificam códigos de idioma diferentes — por exemplo, lang='en' e xml:lang='tr'. Quando esses valores entram em conflito, tecnologias assistivas e processadores XML recebem sinais contraditórios e podem se comportar de maneira imprevisível. Ambos os valores devem especificar o mesmo subtipo de idioma primário.

Embora essas três regras cubram as falhas programáticas mais comuns, ferramentas automatizadas não podem verificar a precisão semântica — isto é, elas não podem determinar se o idioma declarado realmente corresponde ao idioma em que a página está escrita. Uma página escrita inteiramente em turco, mas declarando lang='en', passará em todas as três regras do axe-core, mas ainda assim falhará na WCAG 3.1.1, porque o idioma declarado não reflete o idioma principal real da página. Portanto, a revisão manual é sempre necessária juntamente com a varredura automatizada para confirmar que o idioma declarado está correto.

Como Testar

Varredura automatizada com axe DevTools ou Lighthouse: Abra a página no Chrome ou Firefox. Abra o DevTools (F12), navegue até o painel do axe DevTools ou a aba Lighthouse e execute uma auditoria completa de acessibilidade. Procure especificamente por violações sob as regras html-has-lang, html-lang-valid e html-xml-lang-mismatch. O axe destacará o elemento <html> e descreverá a falha específica. O Lighthouse apresentará problemas semelhantes em sua categoria de Acessibilidade. Anote todas as violações sinalizadas e suas correções recomendadas.
Inspeção manual do código-fonte: Veja o código-fonte da página (Ctrl+U na maioria dos navegadores) e localize a tag de abertura <html>. Verifique se ela contém um atributo lang, se o valor do atributo é uma tag BCP 47 válida (verifique no Registro de Subtags de Idioma da IANA) e se reflete com precisão o idioma em que o conteúdo da página está escrito. Para páginas XHTML, verifique também se qualquer atributo xml:lang carrega o mesmo subtipo de idioma primário que lang.
Teste com leitor de tela usando NVDA e Firefox: Instale o NVDA (gratuito, Windows) e abra a página no Firefox. Pressione NVDA+T para ler o título da página e ouça a voz TTS que está sendo usada. Se a página estiver em turco, a voz deve ser uma voz TTS em turco, e as palavras em turco devem ser pronunciadas corretamente. Se você ouvir uma voz em inglês ou outro idioma incorreto em conteúdo em turco, o atributo lang está ausente ou incorreto. Repita com JAWS no Chrome e VoiceOver no Safari no macOS (Cmd+F5 para ativar o VoiceOver, depois navegue até a página e ouça como o texto do corpo é pronunciado).
Verificação de detecção de idioma pelo navegador: Abra a página no Chrome. Procure a barra de tradução integrada do navegador — o Chrome oferecerá traduzir páginas que ele identifica como estando em um idioma estrangeiro em relação às configurações do navegador. Se o Chrome identificar incorretamente o idioma da página ou deixar de oferecer tradução quando deveria, isso é um sinal prático de que o atributo lang está errado ou ausente. Este não é um teste de acessibilidade definitivo, mas é um indicador secundário útil.
Verificação de precisão semântica (apenas manual): Leia o conteúdo da página e confirme se o valor declarado em lang corresponde ao idioma principal real da página. Ferramentas automatizadas não podem realizar essa verificação. Preste atenção especial a sites multilíngues que servem versões em diferentes idiomas a partir de URLs diferentes — a página de cada URL deve declarar seu próprio idioma correto, e não herdar um único padrão global.

Como Corrigir

Atributo lang ausente — Incorreto

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>Başvuru Formu</title>
  </head>
  <body>
    <h1>Hoş Geldiniz</h1>
  </body>
</html>

Atributo lang ausente — Correto

<!DOCTYPE html>
<html lang='tr'>
  <!-- lang='tr' diz aos leitores de tela para usar uma voz TTS em turco -->
  <head>
    <meta charset='UTF-8'>
    <title>Başvuru Formu</title>
  </head>
  <body>
    <h1>Hoş Geldiniz</h1>
  </body>
</html>

Valor inválido do atributo lang — Incorreto

<!DOCTYPE html>
<html lang='turkish'>
  <!-- 'turkish' não é uma tag BCP 47 válida; o axe sinalizará html-lang-valid -->
  <head>
    <title>Kurumsal Site</title>
  </head>
  <body>
    <p>Şirketimiz hakkında bilgi edinmek için buraya tıklayın.</p>
  </body>
</html>

Valor inválido do atributo lang — Correto

<!DOCTYPE html>
<html lang='tr'>
  <!-- Use o código de duas letras ISO 639-1 'tr', não a palavra em inglês 'turkish' -->
  <head>
    <title>Kurumsal Site</title>
  </head>
  <body>
    <p>Şirketimiz hakkında bilgi edinmek için buraya tıklayın.</p>
  </body>
</html>

Incompatibilidade xml:lang em XHTML — Incorreto

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='tr'>
  <!-- lang e xml:lang não coincidem — violação de html-xml-lang-mismatch -->
  <head><title>XHTML Sayfası</title></head>
  <body><p>İçerik burada.</p></body>
</html>

Incompatibilidade xml:lang em XHTML — Correto

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='tr' xml:lang='tr'>
  <!-- Tanto lang quanto xml:lang são 'tr' — consistente e válido -->
  <head><title>XHTML Sayfası</title></head>
  <body><p>İçerik burada.</p></body>
</html>

Idioma errado declarado em um site multilíngue — Incorreto

<!-- Versão em inglês do site, mas lang está definido como 'tr' globalmente -->
<html lang='tr'>
  <head><title>About Us</title></head>
  <body>
    <p>Welcome to our company. We specialize in accessible web solutions.</p>
  </body>
</html>

Idioma errado declarado em um site multilíngue — Correto

<!-- Cada versão de idioma declara seu próprio atributo lang correto -->
<html lang='en'>
  <!-- Esta é a página em inglês; a página em turco em /tr/ declara lang='tr' -->
  <head><title>About Us</title></head>
  <body>
    <p>Welcome to our company. We specialize in accessible web solutions.</p>
  </body>
</html>

Erros Comuns

Usar o nome completo em inglês do idioma em vez de seu código BCP 47 — escrever lang='turkish', lang='english' ou lang='arabic' em vez dos códigos corretos tr, en e ar. Esses valores não são reconhecidos por tecnologias assistivas.
Usar um sublinhado como separador de região — escrever lang='en_US' ou lang='tr_TR' em vez das formas separadas por hífen lang='en-US' e lang='tr-TR'. BCP 47 exige hífens, não sublinhados.
Definir o atributo lang em <body> em vez de <html> — o atributo lang deve estar no elemento raiz <html> para satisfazer a regra html-has-lang do axe-core e fornecer às tecnologias assistivas o contexto de idioma em nível de página de que precisam antes de analisar qualquer conteúdo.
Deixar lang como uma string vazia — definir lang='' é tratado da mesma forma que um atributo ausente pela maioria das tecnologias assistivas e será sinalizado por html-has-lang, porque uma string vazia não é uma tag de idioma válida.
Copiar um template de um projeto em outro idioma sem atualizar o atributo lang — um problema muito comum em fluxos de trabalho de desenvolvimento na Turquia em que um boilerplate em inglês é reutilizado e o lang='en' na tag <html> nunca é alterado para lang='tr'.
Declarar o atributo lang correto, mas não atualizá-lo ao lançar uma nova versão de idioma do site — sites multilíngues que usam renderização do lado do servidor devem garantir que o atributo lang seja definido dinamicamente por localidade, e não codificado com um único valor em um template de layout compartilhado.
Presumir que um CMS ou framework define automaticamente o atributo lang corretamente — muitas plataformas de CMS (incluindo algumas configurações de WordPress, Joomla e frameworks personalizados) não definem um atributo lang válido por padrão. As pessoas desenvolvedoras devem verificar isso no nível do template, e não presumir que isso é tratado automaticamente.
Confundir o atributo lang (para HTML) com o cabeçalho HTTP Content-Language — o cabeçalho HTTP afeta cache e negociação de conteúdo, mas não é usado por leitores de tela. O atributo lang no documento, em <html>, é o mecanismo correto para conformidade com a WCAG 3.1.1.
Usar um subtipo regional válido, mas incorreto, que implica um dialeto diferente — por exemplo, declarar lang='zh-TW' (chinês tradicional, Taiwan) em uma página escrita em chinês simplificado (zh-CN) pode fazer com que um leitor de tela selecione o perfil de voz e as regras de pronúncia errados.
Esquecer de definir lang em conteúdo de página inteira injetado dinamicamente em aplicações de página única (SPAs) — se uma SPA carregar conteúdo em vários idiomas dentro da mesma estrutura de documento sem atualizar o atributo lang, pessoas usuárias que navegam entre seções de idioma não receberão a pronúncia TTS correta para as novas seções de conteúdo.

Relação com os Regulamentos de Acessibilidade da Turquia

WCAG 3.1.1 Idioma da Página tem peso legal direto na Turquia sob a Circular Presidencial 2025/10, publicada no Diário Oficial nº 32933 em 21 de junho de 2025. Essa circular estabelece requisitos obrigatórios de acessibilidade na web alinhados com a WCAG 2.2 e define a conformidade de Nível A como o padrão mínimo obrigatório para todas as entidades abrangidas.

A circular abrange uma ampla gama de organizações dos setores público e privado. Instituições públicas — incluindo ministérios, municípios, universidades públicas, hospitais públicos e todos os órgãos de governo central e local — são obrigadas a alcançar conformidade total de Nível A dentro de um ano a partir da publicação da circular. Entidades do setor privado abrangidas pela regulamentação têm uma janela de conformidade de dois anos e incluem plataformas de comércio eletrônico, bancos e instituições financeiras, hospitais privados e prestadores de serviços de saúde, operadoras de telecomunicações com 200.000 ou mais assinantes, agências de viagens, empresas de transporte privado e escolas privadas que operam sob autorização do Ministério da Educação Nacional (MoNE).

Como a WCAG 3.1.1 é um critério de Nível A, ela se enquadra na base obrigatória para todas as entidades abrangidas pela circular. O site de uma instituição pública turca que omite lang='tr' de seu elemento <html> — ou que declara uma tag de idioma incorreta ou inválida — está em não conformidade direta com um padrão legalmente obrigatório. Para organizações do setor privado, como bancos e plataformas de comércio eletrônico, a mesma falha dentro de sua janela de conformidade constitui uma violação regulatória.

A implicação prática para equipes web turcas é significativa: cada template de página, cada layout de CMS, cada estrutura de SPA e cada página gerada dinamicamente deve ser auditada para confirmar a presença de um lang='tr' válido (ou variante apropriada) no elemento HTML raiz. Isso não é apenas uma recomendação de boa prática — sob a Circular 2025/10, é uma obrigação legal. Dado que as regras do axe-core html-has-lang e html-lang-valid podem detectar a maioria dessas falhas automaticamente, não há barreira técnica para identificar e corrigir esse problema antes que os prazos de conformidade cheguem.

As organizações sujeitas à circular devem tratar a conformidade com a WCAG 3.1.1 como um item de remediação de primeira prioridade: é um dos critérios mais fáceis de corrigir (um único atributo em um único elemento), mas tem um impacto desproporcional na acessibilidade de cada página para pessoas usuárias de leitores de tela — o grupo cujos direitos a regulamentação foi mais diretamente concebida para proteger.