Qual é a função da tag “autocomplete”?
A tag “autocomplete” é um recurso que permite aos usuários salvar informações de contato, como nomes, endereços, números de telefone e endereços de e-mail para uso posterior em outros formulários.
Quando um usuário retorna para preencher um formulário diferente do já preenchido, o navegador pode oferecer sugestões com base em informações previamente armazenadas. Isso economiza tempo e facilita o reabastecimento. Porém, quando o recurso “autocomplete” não está configurado corretamente, pode apresentar barreiras de acessibilidade para alguns usuários.
Por exemplo, pessoas com deficiência visual ou motora podem ter dificuldade em preencher formulários sem esta funcionalidade. É por isso que é importante que os desenvolvedores de sites adicionem a tag “autocomplete” aos campos apropriados do formulário, indicando que tipo de informação é esperada em cada campo.
Em resumo, a tag “autocomplete” é importante para melhorar a acessibilidade e usabilidade dos formulários web para uma ampla variedade de usuários, especialmente aqueles com deficiências ou limitações físicas.
Como é inserido no HTML?
- Identifique os campos do seu formulário: identifique os campos do seu formulário aos quais você deseja adicionar a tag “autocomplete”.
- Adicione a tag “autocomplete” aos campos do seu formulário: para adicionar a tag “autocomplete” aos campos do seu formulário, basta adicionar o atributo “autocomplete” ao seu código HTML e atribuir o valor correspondente que corresponda ao tipo de informação solicitada naquele campo. Por exemplo, para um campo “Nome”, você pode adicionar a tag “autocomplete” com o valor “nome”. Mostramos alguns exemplos:
Veja a Caneta
Preenchimento automático por Taller Agencia (@webmastertalleragencia)
em CodePen. - Atribuir os valores corretos à tag “autocomplete”: certifique-se de atribuir os valores corretos à tag “autocomplete” para cada campo do formulário. Alguns dos valores mais comuns incluem “nome” para campos de nome, “e-mail” para campos de e-mail, “tel” para campos de telefone e “endereço” para campos de endereço.
Como posso saber qual valor corresponde a cada campo?
O valor que deve ser atribuído à tag “autocomplete” de um formulário depende do tipo de informação que está sendo solicitada no campo. Os mais comuns são:
- “nome”: usado para campos de nome, como “Nome” ou “Sobrenome”.
- “e-mail”: usado para campos de e-mail, como “E-mail” ou “E-mail”.
- “tel”: usado para campos de número de telefone, como “Telefone” ou “Número de telefone”.
- “address-line1”, “address-line2”, “address-level1”, “address-level2”, “postal-code”, “country”: usado para campos de endereço, como “Endereço” ou “Código Postal”.
Para obter uma lista completa de valores de “preenchimento automático” e os tipos de informações que eles representam, você pode ver a especificação HTML para a tag “autocomplete” no site do World Wide Web Consortium (W3C) ou em atributo HTML: autocomplete, onde vários aparecem exemplos de como esses valores poderiam ser inseridos.
É importante garantir que você use os valores corretos de “preenchimento automático” em seu formulário para garantir que os usuários possam preencher o formulário com eficiência e sem problemas.
Como insiro o Formulário de Contato no WordPress?
Para inserir a tag “autocomplete” em formulários WordPress, sua implementação dependerá do plugin de formulário utilizado. Especificamente para o plugin Formulário de Contato, que usamos em Seu Site Acessível, isso é feito seguindo estas etapas:
- Vá para a seção Plugins instalados.
- Selecione o plugin de contato que temos (no nosso caso Formulário de Contato 7).
- Encontre o formulário que queremos editar.
- Adicione a tag “autocomplete” com o atributo correspondente ao seu campo.
- Salvar alterações.
Por que é tão importante em termos de acessibilidade na Web?
É fundamental ter a tag “autocomplete” nos campos do seu formulário para melhorar a acessibilidade e usabilidade do seu site. Desta forma, todos os usuários que utilizam tecnologias assistivas como leitores de tela ou pessoas com deficiência cognitiva poderão preencher os diversos campos do formulário sem problemas.
Deve-se observar que navegadores como o Google Chrome possuem uma implementação própria que lembra as informações de contato do usuário para uso em ocasiões subsequentes. Apesar disso, é imprescindível adicionar a tag “autocomplete” aos seus formulários, pois pode haver usuários que possuam outros navegadores que não possuam esta implementação.
Também é importante lembrar que embora a tag “autocomplete” possa melhorar a acessibilidade dos seus formulários, não é o único recurso que precisa ser levado em consideração para torná-los acessíveis. É importante seguir todas as diretrizes estabelecidas pela WCAG para garantir que seus formulários estejam acessíveis.
Se você tiver dúvidas sobre acessibilidade na web, entre em contato conosco e responderemos a todas as suas perguntas a esse respeito.
