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?
lang
.hreflang
.language
.Como você pode mudar o sistema de escrita em seu site?
direction
.dir
.<link>
.Recursos
- Artigos e tutoriais de internacionalização do W3C
- O Guia compulsivo de endereços postais do Frank oferece links úteis e orientações abrangentes sobre formatos de endereço em mais de 200 países.
- O DataHub.io é uma ferramenta para fazer o download de códigos e nomes de países.