Atributo Lang

Importância

Vivemos em uma época globalizada, no qual pessoas de vários países podem acessar nossos sites. Muitas dessas pessoas também possuem algum problema de acessibilidade e fazem uso de leitores de tela para poderem navegar corretamente nos sites.

Quando não especificamos o atributo lang em nosso site, um leitor de tela presumirá que a página está no idioma padrão que o usuário escolheu. Caso ela não esteja, o leitor poderá anunciar os textos da página de maneira incorreta.

Recomendações

Sempre use o atributo de idioma lang na tag html . Este será herdado por todos os demais elementos, desse modo definindo o idioma padrão do texto no elemento head do documento.

O atributo lang segue as definições da normal IETF BCP47, sendo completa o suficiente para abranger dialetos bem específicos. Na grande maioria seu uso é bem simples:

  • Idioma [requerido]: um código de 2 ou 3 caracteres que define o idioma base, tipicamente escrita em letras minúsculas.

    • en é o equivalente para Inglês

    • pt é o equivalente para Português;

  • Região: define um dialeto do idioma base em uma localização particular e tem um código de 2 letras maiúsculas referentes ao país, ou um código de três números referentes à uma área fora do país.

    • es-ES é para espanhol falado na Espanha

    • es-013 é o espanhol falado na America Central.

Na Tray existe a variável tray.lang disponível para colocar o idioma configurado pelo lojista na loja no HTML. Existem 3 idiomas atualmente suportados pela plataforma:

  • Português - pt

  • Espanhol - es

  • Inglês - en

O código abaixo demostra o uso dessa variável quando configurado com o idioma Português:

Código exemplo
<!DOCTYPE html>
<html lang="{{ tray.lang }}">    
    ...
</html>
Código renderizado
<!DOCTYPE html>
<html lang="pt">    
    ...
</html>

Last updated