Internacionalização e localização

Se você estiver lendo isto, estará usando a World Wide Web. Seus formulários podem ser usados por pessoas que falam idiomas diferentes, 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 ver como você pode verificar se seu formulário funciona com diferentes idiomas.

A primeira etapa para deixar o site pronto para localização é 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 do navegador.

<html lang="en-us">

Saiba mais sobre o atributo lang.

Digamos que você traduziu um formulário para o alemão. Como você pode ter certeza de que os mecanismos de pesquisa e navegadores sabem sobre a versão traduzida? É possível adicionar elementos <link> ao <head> do site para descrever 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

Você não pode traduzir seu formulário para todos os idiomas, mas você pode garantir que as ferramentas de tradução o traduzam para você.

Para garantir que as ferramentas de tradução traduzam todo o texto do formulário, Certifique-se de que todo o texto esteja definido em HTML e 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.

Garantir que seu formulário funcione com diferentes sistemas de escrita

Sistemas de escrita e conjuntos de caracteres diferentes são usados em diferentes idiomas. 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 em diferentes sistemas de escrita, use as propriedades lógicas de CSS.

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

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

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

Saiba mais sobre as propriedades lógicas.

Garantir que seu formulário possa lidar com diferentes formatos de nome

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

Você pode adicionar um campo para o nome e outro para o sobrenome. No entanto, os nomes são diferentes no mundo inteiro: por exemplo, algumas pessoas não têm um sobrenome - então, como elas devem sobrenome?

Para facilitar e agilizar a digitação de nomes, além de garantir que todos possam inserir seus nomes, formato: use um único campo de formulário para nomes sempre que possível.

Saiba mais sobre nomes pessoais.

Se você tiver um nome com caracteres não latinos, você pode ter encontrado o problema de que seu nome é informado como invalid em alguns formulários. Quando você criar formulários, permita todos os caracteres possíveis e não presuma que um nome consiste apenas de 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, a rua, a cidade, o estado, o CEP e o 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 maneira é usar entradas genéricas.

Saiba mais sobre outras formas 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 para leitores de tela?

Com o atributo lang.
🎉
Com o atributo hreflang.
Tente novamente.
Adicionar uma descrição com qual idioma é usado.
Tente novamente.
Com o atributo language.
Tente novamente.

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

Com o atributo direction.
Tente novamente.
Com o atributo dir.
🎉
Usar propriedades lógicas de CSS.
Tente novamente.
Usando o elemento <link>.
Tente novamente.

Recursos