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