Acessibilidade: criar um formulário Wix acessível

4分
Os formulários permitem que os visitantes do site enviem informações, participem de uma lista de emails e muito mais. Ao criar um formulário, é importante ter em mente a acessibilidade para garantir que todos possam visualizá-lo e usá-lo. 
Siga as etapas neste artigo para criar um formulário com o qual os visitantes podem navegar e interagir, e tirar o máximo proveito do seu site.

Etapa 1 | Mostre títulos dos campos

Mostre títulos dos campos para permitir que os visitantes identifiquem cada campo do formulário. Exibir títulos fornece clareza e indica aos visitantes o campo em que eles estão no momento.

Para mostrar os títulos dos campos:

  1. Selecione o formulário no seu editor.
  2. Clique em Editar formulário.
  3. Selecione um campo de formulário.
  4. Clique em Configurações.
  5. Passe o mouse sobre o campo relevante e clique no ícone Mais ações .
  6. Clique em Mostrar título do campo.
A central de formulários. Um campo foi selecionado e o cursor está clicando em

Etapa 2 | Defina os títulos dos campos

Depois de ativar os títulos dos campos, certifique-se de defini-los claramente. O título deve ser específico para garantir que os visitantes saibam exatamente o que é necessário (sobrenome, número de telefone, etc).

Para definir os títulos dos campos:

  1. Selecione o formulário no seu editor.
  2. Clique em Editar formulário.
  3. Selecione um campo de formulário.
  4. Clique em Configurações.
  5. Insira o texto em Título do campo.
  6. Salvarをクリック。
A central de formulários. Um campo foi selecionado e o cursor está clicando no campo do título.

Etapa 3 | Personalize o design do formulário

Ajustar os campos e botões do formulário por estado (Normal, Ao passar o mouse e Erro) pode criar uma experiência visual lógica. Recomendamos personalizar o design para o estado Ao passar o mouse, por exemplo, para que os visitantes saibam com qual parte do formulário estão interagindo.
ディカ
O estado Ao passar o mouse é como o campo/botão do formulário fica quando um visitante passa o mouse sobre ele. O estado Normal é como ele é exibido antes de um visitante interagir com ele.

Para personalizar o design do formulário:

  1. Selecione o formulário no seu editor.
  2. Clique em Configurações.
  3. Selecione Design.
  4. Escolha qual parte do formulário você deseja personalizar:
    • Campos
      1. Selecione Campos do formulário.
      2. Selecione Ao passar o mouse no menu dropdown.
      3. Altere o design do campo:
        • Cor e opacidade: defina a cor do background do campo e arraste o slider para alterar a opacidade.
        • Cor e opacidade da borda: defina a cor e a opacidade da borda do campo.
    • Botões:
      1. Selecione Botões.
      2. Selecione o botão que deseja personalizar (Enviar, Voltar, Fazer upload, etc).
      3. Clique na aba Ao passar o mouse.
      4. Altere o design do botão:
        • Cor do texto: defina a cor do texto do botão no estado Ao passar o mouse.
        • Cor e opacidade: defina a cor do background do botão e arraste o slider para alterar a opacidade.
        • Cor e opacidade da borda: defina a cor e a opacidade da borda do botão.
O painel de design do campo do formulário está aberto. O estado Ao passar o mouse foi selecionado e o cursor está clicando na caixa de cores.
ディカス

Etapa 4 | Ative indicadores visuais no seu site

Os indicadores visuais podem ajudar pessoas com diferentes necessidades de visão/mobilidade a navegar no seu site. Quando você as ativa, os visitantes que usam a tecla Tab podem ver uma caixa azul ao redor da seção ou elemento em que estão. Saiba mais sobre indicadores visuais
Os indicadores visuais são ativados automaticamente em sites criados no Editor do Wix Studio.

Para ativar indicadores visuais:

  1. Selecione Configurações na barra superior do seu Editor.
  2. Selecione Acessibilidade.
  3. Selecione o ícone Mais ações no canto superior direito do Assistente. 
  4. Selecione em Configurações avançadas de acessibilidade.
  5. Selecione Indicadores visuais
  6. Ative a alavanca Permita que os usuários naveguem no seu site pelo teclado.
A alavanca dos indicadores visuais foi ativada nas configurações avançadas do Assistente de Acessibilidade.
Próximo passo:
Confira a Checklist de acessibilidade do site para continuar melhorando seu site e deixá-lo mais acessível. 

この記事は役に立ちましたか?

|