É muito comum nos depararmos com páginas em outros idiomas e utilizarmos as ferramentas de tradução do próprio navegador para compreender o que é exibido na tela. Porém, a tradução deve ir muito além do que é exibido para quem enxerga. Existem alguns atributos importantes para acessibilidade que deveriam ser contemplados na tradução automática dos navegadores. Sendo assim, decidi testar como a tradução automática dos navegadores se comporta quando encontra atributos HTML invisíveis.
Fiz o teste usando o aria-label (que serve para dar uma descrição/rótulo acessível a um elemento), o atributo alt (que permite adição de texto alternativo a imagens) e o atributo title (conteúdo complementar e pouco relevante para acessibilidade).
Este artigo foi inspirado no excelente e completo post do Adrian Rosselli “aria-label Does Not Translate” onde ele faz uma vasta pesquisa sobre como os navegadores traduzem o conteúdo do atributo aria-label. Aproveitando essa ideia, decidi fazer o teste com outros atributos importantes para acessibilidade.
Criei uma página simples, com o idioma declarado como lang=”pt-br” e o seguinte código na página:
<p>Teste de tradução automática com <a href="#" aria-label="conteúdo complementar em atributo">atributos para acessibilidade</a></p> <p><img src="#" alt="Texto alternativo de uma imagem"></p> <p>Teste de atributo <a href="#" title="conteúdo para tradução">complementar</a></p>
Com a página publicada, localizei o recurso de tradução do navegador e selecionei para traduzir o conteúdo da página de português para inglês. Os testes foram feitos no sistema operacional Windows no dia 2/2/2024. O texto visível dos parágrafos foi completamente traduzido, mas alguns atributos foram deixados de lado. O resultado apresento a seguir (por ordem dos melhores resultados para os piores):
Brave Versão 1.62.156 Chromium 121.0.6167.139
- lang: Traduziu
- aria-label: Traduziu
- alt: Traduziu
- title: Traduziu
Google Chrome Versão 121.0.6167.140
- lang: Traduziu
- aria-label: Traduziu
- alt: Traduziu
- title: Não traduziu
Microsoft Edge Versão 121.0.2277.98
- lang: Não traduziu
- aria-label: Traduziu
- alt: Traduziu
- title: Não traduziu
Mozilla Firefox Versão 122.0
- lang: Não traduziu
- aria-label: Não traduziu
- alt: Não traduziu
- title: Não traduziu
Considerando o teste traduzindo conteúdo em inglês para português obtive praticamente os mesmos resultados. A única diferença foi no Google Chrome, que traduzindo do inglês para português ele também traduz o conteúdo do atributo title.
Fiz o teste também no meu celular (Samsung) com os navegadores disponíveis. Os únicos que consegui traduzir a página foram o Google Chrome e o Brave. Não encontrei no Firefox e DuckDuckGo uma forma simples de traduzir o texto. Como não foi possível inspecionar elementos pelo celular, não consegui aferir o resultado dos atributos lang e title pelo código. Somente pelo retorno do leitor de tela:
Brave Mobile Versão 1.61.120 + Talkback
- lang: Não foi possível testar, mas mudou o sintetizador para inglês
- aria-label: Traduziu
- alt: Traduziu
- title: Não foi possível testar
Google Chrome Mobile Versão 119.0.6045.66 + Talkback
- lang: Não foi possível testar, mas mudou o sintetizador para inglês
- aria-label: Traduziu
- alt: Traduziu
- title: Não traduziu
Ainda pretendo fazer os testes em navegadores de outros sistemas operacionais. Vou atualizando esta página conforme os testes evoluem.
Conclusão
Me surpreendeu que navegadores ainda tem dificuldade para traduzir atributos importantes para acessibilidade. Com relação ao title, que tem pouca relevância para acessibilidade, não vejo problemas, mas a impossibilidade de traduzir atributos como aria-label e alt é preocupante.
Nos testes no smartphone não consegui inspecionar os elementos para verificar se o atributo lang é traduzido, mas como o leitor de tela muda o sintetizador para a pronúncia em outro idioma isso é um indicativo de que a página ou o navegador alterou o idioma para facilitar a compreensão.
Comparando os resultados com o artigo do Adrian, percebo que a disponibilidade da tradução pode depender do idioma traduzido. Pretendo fazer testes em outras páginas para ampliar o resultado e entender se essa percepção faz sentido.
Crédito da imagem: FreePik.com
