Internacionalização e localização

Se você está lendo isto, então está usando a World Wide Web. Seus formulários podem ser usados por pessoas que falam diferentes idiomas, pessoas de diferentes países e pessoas com diferentes origens culturais. Saiba como preparar seu formulário para internacionalização e localização.

Verifique se o formulário funciona em diferentes idiomas

Vamos conferir como você pode garantir que seu formulário funcione com diferentes idiomas.

A primeira etapa para preparar a localização do site é definir o atributo de idioma lang no elemento <html>. Esse atributo permite que os leitores de tela invoquem a pronúncia correta e ajuda os navegadores a oferecer uma tradução da página caso o idioma definido não seja o padrão.

<html lang="en-us">

Saiba mais sobre o atributo lang.

Digamos que você traduziu um formulário para o alemão. Como garantir que os mecanismos de pesquisa e os navegadores conheçam a versão traduzida? Você pode adicionar elementos <link> ao parâmetro <head> do seu site que descrevem as versões alternativas.

<link rel="alternate" title="The form element"
  href="https://example.com/en/form" hreflang="en">
<link rel="alternate" title="Das Formularelement"
  href="https://example.com/de/form" hreflang="de">

Ajudar usuários que falam outro idioma a usar seu formulário

Não é possível traduzir um formulário para todos os idiomas, mas você pode garantir que as ferramentas de tradução consigam fazer a tradução.

Para garantir que as ferramentas de tradução traduzam todo o texto do formulário, confira se todo o texto está definido em HTML e está visível. Algumas ferramentas também funcionam com conteúdo definido em JavaScript, mas, para melhorar a compatibilidade, tente incluir o máximo de texto possível em HTML.

Verifique se o formulário funciona com diferentes sistemas de escrita

Diferentes idiomas usam diferentes sistemas de escrita e conjuntos de caracteres. Alguns scripts são escritos da esquerda para a direita e outros da direita para a esquerda.

Tornar o espaçamento independente dos sistemas de escrita

Para garantir que seu formulário funcione com diferentes sistemas de escrita, use as propriedades lógicas de CSS.

A entrada tem uma espessura de borda 1px em todos os lados, exceto no lado esquerdo, em que a borda tem 4px de espessura. Agora, edite o CodePen e mude o sistema de escrita para a direita para a esquerda adicionando dir="rtl" ao elemento <main>

A borda grossa agora está no lado direito. Isso ocorre porque definimos a borda usando uma propriedade lógica.

input {
  border-inline-start-width: 4px;
}

Saiba mais sobre propriedades lógicas.

Seu formulário pode processar diferentes formatos de nome

Digamos que você tenha um formulário para o qual o usuário deve preencher o nome. Como você adicionaria o campo ao seu formulário?

É possível adicionar um campo para o nome e outro para o sobrenome. No entanto, os nomes são diferentes em todo o mundo: por exemplo, algumas pessoas não têm um sobrenome. Então, como elas devem preencher o campo de sobrenome?

Use um único campo de nome sempre que possível para facilitar e agilizar a inserção de nomes e garantir que todos possam inserir o nome, seja qual for o formato.

Saiba mais sobre nomes pessoais.

Se você tiver um nome com caracteres não latinos, talvez tenha encontrado o problema em que seu nome é relatado como invalid em alguns formulários. Ao criar formulários, permita todos os caracteres possíveis e não presuma que um nome seja composto apenas por caracteres latinos.

Permita vários formatos de endereço

A sede do Google fica em 1600 Amphitheatre Parkway, Mountain View, CA 94043, Estados Unidos.

Esse endereço inclui o número da rua, rua, cidade, estado, CEP e país. No seu país, o formato do endereço pode ser totalmente diferente. Como você pode garantir que todos possam inserir o endereço no formulário?

Uma delas é usar entradas genéricas.

Saiba mais sobre outras maneiras de trabalhar com campos de endereço internacional.

Teste seu conhecimento

Teste seus conhecimentos sobre internacionalização e localização

Como invocar a pronúncia correta nos leitores de tela?

Com o atributo lang.
🎉
Com o atributo hreflang.
Tente de novo.
Adicionar uma descrição com o idioma usado
Tente de novo.
Com o atributo language.
Tente de novo.

Como você pode mudar o sistema de escrita em seu site?

Com o atributo direction.
Tente de novo.
Com o atributo dir.
🎉
Como usar propriedades lógicas CSS.
Tente de novo.
Uso do elemento <link>.
Tente de novo.

Recursos