o atributo autocomplete deve ser usado corretamente

Por que isto é importante

O atributo autocomplete faz mais do que ativar o preenchimento automático do navegador — comunica programaticamente o propósito de um campo de formulário às tecnologias assistivas. Esta informação é crítica para vários grupos de utilizadores:

• Utilizadores de leitores de ecrã dependem do propósito do campo anunciado para entender que informação está a ser solicitada. Sem um valor autocomplete válido, o leitor de ecrã pode não transmitir este contexto claramente.
• Utilizadores com deficiências cognitivas beneficiam de navegadores e ferramentas assistivas que podem preencher automaticamente campos ou mostrar ícones familiares com base no propósito do campo, reduzindo o esforço mental necessário para completar formulários.
• Utilizadores com deficiências motoras beneficiam da funcionalidade de preenchimento automático que minimiza a quantidade de entrada manual necessária.
• Utilizadores com baixa visão podem usar folhas de estilo personalizadas ou extensões do navegador que adaptam a apresentação de campos de formulário com base no seu propósito declarado (p. ex., mostrar um ícone de telefone ao lado de um campo de telefone).

Esta regra mapeia para o Critério de Sucesso 1.3.5 da WCAG 2.1: Identificar propósito da entrada (Nível AA), que requer que o propósito de campos de entrada que recolhem informações do utilizador possa ser determinado programaticamente. O atributo autocomplete é o mecanismo padrão para satisfazer este requisito em HTML.

Como a regra funciona

A regra axe autocomplete-valid verifica que:

1. O valor do atributo autocomplete é um token válido (ou combinação de tokens) conforme definido na especificação HTML para preenchimento automático.
2. O valor é apropriado para o tipo de controlo de formulário ao qual é aplicado (p. ex., email é usado numa entrada do tipo email, não numa checkbox).
3. Os tokens estão corretamente ordenados quando são usados múltiplos tokens (p. ex., um nome de secção seguido de um token de dica seguido do nome do campo).

A regra sinaliza campos onde o valor autocomplete está mal escrito, usa um token inexistente, ou é aplicado de forma inválida.

Como corrigir

1. Identifique todos os campos de formulário que recolhem informações pessoais do utilizador (nome, email, endereço, número de telefone, etc.).
2. Verifique se o tipo de dados corresponde a um dos 53 propósitos de entrada definidos na Secção 7 da WCAG 2.1.
3. Adicione o valor autocomplete correto a cada campo correspondente. Certifique-se de que:
   • O valor está escrito corretamente.
   • É apropriado para o tipo de entrada.
   • Se usar múltiplos tokens, eles seguem a ordem correta: nome de secção opcional (section-*), shipping ou billing opcional, home, work, mobile, fax, ou pager opcional, e depois o nome do campo de preenchimento automático.
4. Defina autocomplete="off" apenas quando tiver uma razão legítima para desativar o preenchimento automático — e note que isto não o isenta da regra se o campo ainda recolher dados identificáveis do utilizador.

Valores autocomplete comuns

Aqui estão alguns dos valores mais frequentemente usados:

Exemplos

Incorreto: valores autocomplete em falta ou inválidos

<!-- Atributo autocomplete completamente em falta -->

<label for="name">Nome Completo</label>
<input type="text" id="name" name="name">

<!-- Valor autocomplete mal escrito -->

<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="emal">

<!-- Valor autocomplete inválido -->

<label for="phone">Telefone</label>
<input type="tel" id="phone" name="phone" autocomplete="phone-number">

Nos exemplos acima, o primeiro campo não tem atributo autocomplete, o segundo tem um erro tipográfico (emal em vez de email), e o terceiro usa um valor não padrão (phone-number em vez de tel).

Correto: valores autocomplete válidos

<label for="name">Nome Completo</label>
<input type="text" id="name" name="name" autocomplete="name">

<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email">

<label for="phone">Telefone</label>
<input type="tel" id="phone" name="phone" autocomplete="tel">

Correto: usando múltiplos tokens

Quando um formulário tem secções separadas de envio e faturação, pode usar tokens adicionais para as distinguir:

<fieldset>
  <legend>Endereço de Envio</legend>
  <label for="ship-street">Endereço de Rua</label>
  <input type="text" id="ship-street" name="ship-street"
    autocomplete="shipping street-address">

  <label for="ship-zip">Código Postal</label>
  <input type="text" id="ship-zip" name="ship-zip"
    autocomplete="shipping postal-code">
</fieldset>

<fieldset>
  <legend>Endereço de Faturação</legend>
  <label for="bill-street">Endereço de Rua</label>
  <input type="text" id="bill-street" name="bill-street"
    autocomplete="billing street-address">

  <label for="bill-zip">Código Postal</label>
  <input type="text" id="bill-zip" name="bill-zip"
    autocomplete="billing postal-code">
</fieldset>

Correto: secções nomeadas com section-*

Pode usar nomes de secção personalizados para agrupar campos relacionados quando o mesmo tipo de dados aparece múltiplas vezes:

<label for="home-tel">Telefone de Casa</label>
<input type="tel" id="home-tel" name="home-tel"
  autocomplete="section-home tel">

<label for="work-tel">Telefone do Trabalho</label>
<input type="tel" id="work-tel" name="work-tel"
  autocomplete="section-work tel">

Ao usar valores autocomplete válidos e corretamente aplicados, você garante que as tecnologias assistivas possam comunicar o propósito de cada campo aos utilizadores, os navegadores possam oferecer preenchimento automático confiável, e os seus formulários cumpram os requisitos do Critério de Sucesso 1.3.5 da WCAG 2.1.

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - 1.3.5 Identify Input Purpose Level AA

→