Bonsai UX
Bonsai UX

UI, Design e User Experience de um ponto de vista zen

Share


Our Newsletter


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tags


avrt

Twitter


Bonsai UX

HTML: o atributo "translate"

Poe BellentaniPoe Bellentani

Quando pensamos em fazer sites, temos que vislumbrar que eles irão muito além das fronteiras de nosso idioma (os meus, pelo menos, quero que cheguem a quem fala klingon).

O Google consegue traduzir qualquer conteúdo praticamente com qualidade, dando uma escorregada ou outra em expressões idiomáticas ou contexto - porém, com a evolução do algoritmo de tradução e aprendizado constante da ferramenta isso logo não passará de "casos isolados e irrelevantes".

No geral, o conteúdo é traduzido de forma a permitir a compreensão do essencial pelo leitor. E isso que importa!

Porém, em algumas áreas, traduções podem ser uma dor de cabeça imensa. Em desenvolvimento de software e web por exemplo é um chute nas bolas.

Como resolver a seguinte sinuca de bico?

Publiquei no meu site o termo "quando inseri no código o atributo title, ainda sim precisei definir algumas coisas no body e no main", mas o Google insiste em traduzir as duas palavras quando o pessoal abre o site em italiano e me entrega: "quando viene inserito nel codice l'attributo title, ma ancora bisogno di impostare alcune cose nel corpo e nella principale ".

Existem algumas maneiras de dar essa volta no tradutor do Google, como colocar entre os sinais de código chaves, colchetes ou os indicadores de abertudas de tag - < >. Mas não fica muito elegante e tem ar de gambiarra, sem contar que não funcionará em outros tradutores por aí.

A coisa do jeito certo

Com esses problemas levantados, a gente é apresentado pra um cara bem legal: o atributo translate.

Ele, lindamente, pode ser adicionado em qualquer tag HTML e faz a felicidade dos metódicos, mas também é essencial para SEO em sites com grande conteúdo - definindo esses atributo quando necessário permite uma indexação mais refinada.

No nosso exemplo acima, o texto ficaria assim com o translate:

Quando inseri no código o atributo <span translate="no">title</span>, ainda sim precisei definir algumas coisas no <span translate="no">body</span> e no <span translate="no">main</span>.

Quando esse texto passar pelo tradutor, ele não será modificado.

quando viene inserito nel codice l'attributo title, ma ancora bisogno di impostare alcune cose nel body e nella main

De novo, pra reforçar: o mais legal é que ele pode ser utilizado em qualquer tag, não somente no <span>, você pode colocar ele em <strong>, <em>, <p>, <div> ou onde seja necessário.

Ok. Parece que é um caso extremo de neurose e apenas útil para sites grandes. Mas não é assim.

Imaginem um site ou sistema que tenha uma linguagem padrão em inglês, com palavras como "commit", "continue", "ok", "next" e outras tantas. Pense ainda que esse sistema não é aberto a tradução automática (como o Photoshop, por exemplo), mas seu manual sim, e que a pessoa não irá traduzir o programa, mas o HTML que explica como o utilizar.

E agora? O que acontecerá será a tradução de todos esses termos e a descontextualização dos mesmos. Você tem um problema nas mãos e pensará em fazer alguma gambiarra pra dar um jeitinho, seja colocando em imagens ou através de hacks deselegantes.

Com o atributo translate seus problemas se acabaram. Basta setar ele e não haverá tradução alguma.

A parte legal é que você ajuda não só na tradução, mas melhora a acessibilidade do seu site.

Imagine um deficiente visual com um software leitor de telas: fazendo essas definições, você pode apontar pro leitor qual é o idioma que está lá e se ele merece tradução ou não - além do que você evita que os caracteres especiais da "gambiarra" do uso de chaves ou colchetes sejam lidos e confundam o usuário. Você faz seu trabalho direito e ainda ganha uns pontos pra trocar em milhas aéreas pro Valhalla.

Faça, mas faça certo!

Ah, e lembre-se, se você vai colocar translate='yes' em uma tag HTML pense duas vezes. Ele já vem padrão dessa forma - pra felicidade da Auditana, Deusa do Código Limpo, só utilize esse atributo em lugares que não devem ser traduzidos e em suas exceções de tradução:

<p translate="no">
  <label for="postcode">
  	<span translate="yes">Adicione o CEP de entrega</span>
  </label>
  <input id="postcode" type="text">
</p>

Nesse caso aí de cima, você teria a tradução somente do que está na tag <span translate="yes">. O resto ficaria bonitão sem interferência.

Indo até a fonte

Pra sua alegria, tem um artigo no W3C falando em detalhes da tag e explicando todas as coisas legais sobre ela. Vale a pena dar uma lida.

Using HTML's translate attribute

Ou seja espertinho e acesse o traduzido pra ver já a tag em ação.

Comments