Sobre esta regra de acessibilidade
Os leitores de ecrã dependem da informação do idioma para selecionar o motor de pronúncia correto para o conteúdo. Cada idioma tem a sua própria biblioteca sonora com regras de pronúncia, entoação e padrões fonéticos únicos. Quando um leitor de ecrã encontra um atributo lang com um valor válido, muda seamlessly para a biblioteca apropriada. Mas quando o valor é inválido — por exemplo, lang="egnlish" em vez de lang="en" — o leitor de ecrã não consegue identificar o idioma e reverte para o padrão, lendo o texto em língua estrangeira com pronúncia completamente errada.
Isto afeta principalmente utilizadores cegos e utilizadores surdocegos que dependem de leitores de ecrã, bem como utilizadores com deficiências cognitivas que podem depender de ferramentas de text-to-speech. Imagine ouvir texto em espanhol pronunciado com regras fonéticas do inglês — seria quase incompreensível.
Note que esta regra verifica especificamente atributos lang em elementos dentro da página (não o elemento <html> em si, que é coberto por uma regra separada). Aplica-se sempre que você usa o atributo lang para indicar que uma secção do conteúdo está num idioma diferente do resto da página.
Critérios de sucesso WCAG relacionados
Esta regra mapeia para WCAG 2.0 / 2.1 / 2.2 Critério de Sucesso 3.1.2: Language of Parts (Nível AA). Este critério requer que o idioma humano de cada passagem ou frase no conteúdo possa ser determinado programaticamente, exceto para nomes próprios, termos técnicos e palavras de idioma indeterminado. Usar um código de idioma válido é essencial para cumprir este requisito — um código inválido falha em transmitir programaticamente o idioma.
Esta regra é também referenciada pela metodologia Trusted Tester, EN 301 549, e RGAA.
Como corrigir
-
Use códigos de idioma válidos. Os valores de idioma devem estar conformes com o padrão BCP 47. Na prática, isto significa usar códigos de duas ou três letras do IANA Language Subtag Registry. Exemplos comuns incluem
en(inglês),fr(francês),es(espanhol),de(alemão),zh(chinês),ar(árabe), eja(japonês). -
Verifique erros ortográficos. Valores inválidos são frequentemente causados por erros ortográficos (ex.
lang="enlish") ou usar nomes completos de idiomas em vez de códigos (ex.lang="French"em vez delang="fr"). -
Use subtags de dialeto quando apropriado. Você pode especificar variantes regionais como
en-US(inglês americano),en-GB(inglês britânico), oufr-CA(francês canadense). Apenas a subtag primária também é válida. -
Defina o atributo
dirpara idiomas RTL. Se está a marcar conteúdo num idioma da direita para a esquerda como árabe ou hebraico, combine o atributolangcomdir="rtl"para garantir a renderização correta do texto.
Exemplos
Incorreto: código de idioma inválido
<p>Welcome to our site. <span lang="spn">Bienvenidos a nuestro sitio.</span></p>
O valor spn não é uma subtag de idioma válida. Os leitores de ecrã não conseguem identificar isto como espanhol.
Incorreto: nome completo do idioma em vez de código
<p>Here is a quote: <q lang="Japanese">素晴らしい</q></p>
O valor Japanese não é um código de idioma BCP 47 válido.
Correto: código de idioma de duas letras válido
<p>Welcome to our site. <span lang="es">Bienvenidos a nuestro sitio.</span></p>
O valor es é a subtag de idioma válida para espanhol.
Correto: código de idioma válido com subtag regional
<p>The Canadian term is <span lang="fr-CA">dépanneur</span>.</p>
O valor fr-CA identifica corretamente o francês canadense.
Correto: idioma RTL com atributo de direção
<p>The Arabic word for peace is <span lang="ar" dir="rtl">سلام</span>.</p>
O valor ar é a subtag válida para árabe, e dir="rtl" garante a direcionalidade correta do texto.
Correto: múltiplas mudanças de idioma numa página
<p>
In English we say "goodbye," in German it's
<span lang="de">Auf Wiedersehen</span>, and in Japanese it's
<span lang="ja">さようなら</span>.
</p>
Cada elemento inline usa um código de idioma válido, permitindo ao leitor de ecrã mudar os motores de pronúncia conforme necessário.
Ajude-nos a melhorar os nossos guias
Detecte problemas de acessibilidade automaticamente
O Rocket Validator examina milhares de páginas com Axe Core e o W3C Validator, encontrando problemas de acessibilidade em todo o seu site.