SÓ HOJE 10% DE DESCONTO

USE O CUPOM: SEXTA.FULL

00
Horas
00
Minutos
00
Segundos

Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Como criar formulários da Web acessíveis para WordPress

Você está em:

Como criar formulários da Web acessíveis para WordPress
Como criar formulários da Web acessíveis para WordPress

De acordo com o CDC, 26% dos adultos nos Estados Unidos têm algum tipo de deficiência. Deixar de tornar seu site acessível para pessoas com deficiências visuais ou cognitivas pode resultar em perda de tráfego, classificações ruins de SEO e até mesmo disputas legais.

Quase todos os sites hoje em dia incluem algum tipo de formulário – seja um formulário de pedido de produto ou algo mais simples como um formulário de contato. Os formulários costumam ser uma das partes mais inacessíveis de um site e por isso merecem atenção especial!

Independentemente de como você está implementando seu formulário – usando código personalizado ou um plug-in – você precisa seguir certas diretrizes e práticas recomendadas para garantir que seus formulários sejam totalmente acessíveis.

Neste post, você aprenderá como criar formulários da web acessíveis para WordPress. Isso pode ajudar você a alcançar um público maior, melhorar a experiência do usuário do seu site e aumentar sua receita.

O que é acessibilidade do site?

Verificação de acessibilidade WAVE

Ferramentas como o WAVE Accessibility Checker mostram elementos acessíveis e oportunidades de melhoria.

A Iniciativa de Acessibilidade da Web, administrada pelo World Wide Web Consortium, escreve que:

“Acessibilidade na Web significa que sites, ferramentas e tecnologias são projetados e desenvolvidos para que pessoas com deficiência possam usá-los. Mais especificamente, as pessoas podem – perceber, entender, navegar e interagir com a Web – contribuir para a Web.”

Navegar em um site, inserir informações e selecionar o link ou botão correto pode ser um desafio para usuários com deficiências visuais, físicas ou cognitivas. A acessibilidade envolve a implementação de um conjunto de práticas recomendadas para tornar seu site utilizável:

  • Pessoas com deficiência visual que usam leitores de tela
  • Pessoas com problemas de mobilidade que navegam em sites com o teclado
  • Pessoas com deficiências cognitivas
  • Pessoas que são daltônicas
  • Pessoas que confiam na pesquisa por voz
  • Pessoas que não falam inglês como primeira língua e usam serviços de tradução
  • Pessoas com condições temporárias, como um braço quebrado, que precisam inserir informações usando teclas

Os formulários representam um dos maiores desafios de acessibilidade, pois podem ser difíceis de navegar e confusos de preencher.

A Importância dos Formulários Web Acessíveis

Importância da acessibilidade

Os formulários funcionam como uma ponte entre você e seus clientes. Portanto, é fundamental garantir que seus formulários sejam acessíveis a pessoas com deficiência. Aqui estão algumas das razões mais importantes para otimizar seus formulários da web para acessibilidade geral do WordPress .

Evite disputas legais

Você sabia que a acessibilidade pode em breve ser um requisito legal para o seu site à medida que mais e mais estados começam a implementar mandatos de acessibilidade na web? Isso foi impulsionado por ações judiciais contra marcas conhecidas arquivadas sob o Americans with Disabilities Act (ADA).

Aumente sua receita

Além dos requisitos legais, a acessibilidade pode ajudar a aumentar sua receita. Por exemplo, os resultados da pesquisa British Click-Away Pound de 2019 descobriram que uma grande porcentagem de usuários com deficiência deixa os sites devido a problemas de acessibilidade, levando consigo mais de US$ 17 bilhões em gastos potenciais.

Melhore a experiência do usuário

Seguir as práticas recomendadas de acessibilidade pode ajudar a tornar seu site mais fácil de navegar e de ler. As alterações de acessibilidade ajudam a melhorar a experiência do usuário para todos os visitantes do seu site, não apenas para aqueles com deficiência.

Impulsione seu SEO

Prestar muita atenção à estrutura do seu site e tornar as páginas mais fáceis de navegar pode dar ao seu site um impulso de SEO, facilitando o rastreamento dos mecanismos de pesquisa. Além disso, adicionar “texto alternativo” descritivo às suas imagens, chamado de alt tags, é crucial para pessoas com deficiência visual e mecanismos de pesquisa quando se trata de entender seu conteúdo.

Os mecanismos de pesquisa favorecem o conteúdo que é fácil para todos consumirem. É por isso que a acessibilidade sempre será um fator importante no SEO.

Atraia um público maior

De acordo com estatísticas da Comissão Europeia, das Nações Unidas e de outras organizações, é seguro assumir que cerca de 20% da população mundial tem algum tipo de deficiência. Considerando isso, implementar as práticas recomendadas de acessibilidade pode ajudá-lo a atrair mais clientes.

Diretrizes para criar formulários da Web acessíveis

Então, como você cria formulários acessíveis para o seu site WordPress? Aqui estão algumas diretrizes a serem seguidas.

Use um plug-in de formulário criado para acessibilidade

Se você deseja economizar tempo e esforço, deve usar um plug-in de formulário do WordPress que já inclua recursos de acessibilidade. Quando se trata de formulários acessíveis, um dos melhores plugins disponíveis é o Gravity Forms.

A Gravity Forms está totalmente comprometida com a acessibilidade. Isso se reflete em sua versão mais recente, que inclui uma série de recursos importantes para ajudá-lo a criar formulários acessíveis que atingem a conformidade com WCAG 2.1 AA , o padrão global.

O Gravity Forms 2.5 incluiu uma variedade de aprimoramentos de acessibilidade que o impulsionaram acima de outros plugins de formulário. Isso inclui comentários detalhados do leitor de tela para usuários cegos ou com deficiência visual, bem como avisos na área Admin sobre campos com problemas de acessibilidade.

Aviso de acessibilidade

Mas a acessibilidade não é a única razão para usar o Gravity Forms. Há também uma série de complementos poderosos que estendem o Gravity Forms, permitindo que você crie aplicativos da Web poderosos .

Informe os usuários sobre o que esperar

A clareza geral é importante para a experiência geral do usuário, não apenas para acessibilidade. Ao criar seus formulários, certifique-se de que eles sejam fáceis de digitalizar e tenham instruções claras para cada campo. Se os usuários acharem seus formulários confusos, eles poderão deixar seu site frustrados.

Se você tiver um formulário com várias etapas, é importante informar aos usuários em que estágio eles estão e quantas etapas faltam. Certifique-se de que haja uma maneira de os usuários retornarem às etapas anteriores para que possam alterar ou atualizar as informações conforme acharem adequado.

Por fim, forneça a todos os seus botões e links um texto descritivo para que fique claro o que esperar ao clicar neles. Em vez de usar “Clique aqui” como texto do link, use algo que descreva o link como “Nosso blog”. O mesmo vale para os botões. “Enviar” é seco e genérico, em vez disso, use algo que descreva a ação que o usuário está realizando, como “Inscrever-se” ou “Enviar mensagem”.

Rótulos e descrições de campo

Formulário de inscrição

Ao escrever rótulos, certifique-se de que sejam significativos e diga ao usuário, de forma clara e concisa, o que ele precisa preencher. Para obter as melhores configurações de acessibilidade, coloque seus rótulos acima das entradas de campo onde eles sejam claramente visíveis e não inclua HTML ou links, pois isso pode confundir os leitores de tela.

Se você estiver usando um plug-in de formulário, também terá a opção de escrever descrições de campo. Eles são opcionais, mas você pode usá-los se precisar fornecer informações extras sobre o campo.

Contraste de cores

As cores usadas em seu site são um importante fator de acessibilidade . O contraste de cor refere-se à diferença de luz entre a fonte em primeiro plano e a cor do plano de fundo. Cores mal escolhidas para seus formulários podem dificultar a leitura das pessoas, especialmente aquelas com deficiência visual.

Quando se trata do WordPress, a cor dos seus formulários geralmente é determinada pelo seu tema, mas você pode substituir isso adicionando seus próprios estilos CSS personalizados. Além disso, lembre-se de não se referir à cor nas instruções do formulário. Por exemplo, não diga “clique no botão verde para continuar”, pois isso pode causar problemas para usuários daltônicos.

O tamanho e o peso da fonte também são escolhas importantes de acessibilidade. Certifique-se de que a fonte escolhida para seus formulários seja clara e legível. Existem vários plugins por aí, como One Click Accessibility , que permitem que os usuários visualizem seu site usando diferentes combinações de cores.

Lógica condicional

Se seus formulários contiverem lógica condicional, verifique se ela não afeta a acessibilidade. Por exemplo, nunca use lógica condicional para ocultar o botão “Enviar”.

reCAPTCHAs

Exemplo de recaptcha

Embora CAPTCHAs e reCAPTCHAs possam ser uma parte importante de sua estratégia antispam, eles são um pesadelo quando se trata de acessibilidade. Os CAPTCHAs geralmente exigem que os usuários preencham informações ou selecionem determinadas imagens na tela. Isso não apenas resulta em uma experiência ruim para o usuário, mas também é um desafio para aqueles com deficiências cognitivas e/ou visuais.

Em vez de CAPTCHAs, use alternativas como campos de honeypot ou plugins de spam com foco em privacidade que não afetem a experiência do usuário. O favorito bem conhecido nesta área é Akismet , embora venha com um preço.

Mensagens de erro

Certifique-se de que as mensagens de erro sejam acionáveis e claramente escritas. Suas mensagens de erro devem fornecer feedback sobre erros ou omissões e explicar como corrigi-los. Por exemplo, em vez de dizer “houve um erro”, você poderia dizer “sua senha era muito curta. Por favor, digite uma senha de 12 caracteres ou mais”.

Lembre-se, seu trabalho é ajudar o usuário a preencher seus formulários para que seja um processo rápido e agradável. As mensagens de erro que não fornecem informações suficientes podem causar ansiedade e frustração.

Navegação do teclado

Muitos usuários com deficiências não podem usar um mouse, portanto, certifique-se de que seus formulários sejam navegáveis usando apenas a tecla tab. Isso inclui fechar mensagens de erro e voltar às etapas anteriores.

Marcação HTML robusta

Se você preferir criar formulários do zero, é importante usar o HTML correto, pois é isso que os leitores de tela usam ao transmitir informações. Por exemplo, os rótulos devem usar a tag <label> e não uma tag <span> ou <div>.

Além disso, campos com várias opções de entrada devem usar a tag <fieldset>, pois isso informa aos leitores de tela quais opções pertencem a qual campo.

Formulários Acessíveis para WordPress: Considerações Finais

Acessibilidade na Web é a prática de tornar seu site utilizável por pessoas com deficiências físicas e cognitivas.

Os formulários são um dos aspectos mais importantes de um site, pois fornecem uma ponte entre você e seus clientes. No entanto, os formulários também são notórios por apresentarem problemas de acessibilidade e, portanto, requerem atenção especial!

Dedicar um tempo para criar formulários acessíveis pode ajudá-lo a alcançar um público maior, aumentar seu SEO e melhorar a experiência geral do usuário para os visitantes que acessam seu site. Os formulários acessíveis devem incluir linguagem clara, rótulos descritivos e marcação HTML adequada.

Embora sejam a última moda na prevenção de spam, os CAPTCHAs apresentam uma série de problemas de acessibilidade e devem ser trocados por alternativas menos intrusivas, como plugins antispam que são executados em segundo plano ou campos de honeypot invisíveis.

Você está pronto para começar a criar formulários acessíveis para o seu site WordPress? A implementação das estratégias acima o colocará à frente da maioria dos outros sites na web, então comece hoje mesmo!

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.