O atributo autocomplete deve ser usado corretamente

Porque 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 leitor de ecrã dependem do propósito anunciado do campo para compreender 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 baseados 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 dos campos de formulário baseada no seu propósito declarado (por exemplo, mostrando um ícone de telefone junto a um campo de telefone).

Esta regra mapeia para o Critério de Sucesso 1.3.5 das WCAG 2.1: Identificar propósito da entrada (Nível AA), que exige que o propósito dos campos de entrada que recolhem informação 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) como definido na especificação HTML para preenchimento automático.
2. O valor é apropriado para o tipo de controlo de formulário ao qual é aplicado (por exemplo, email é usado numa entrada do tipo email, não numa checkbox).
3. Os tokens estão corretamente ordenados quando múltiplos tokens são usados (por exemplo, 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 não existente, ou é aplicado de forma inválida.

Como corrigir

1. Identifique todos os campos de formulário que recolhem informação pessoal do utilizador (nome, email, morada, número de telefone, etc.).
2. Verifique se o tipo de dados coincide com um dos 53 propósitos de entrada definidos na Secção 7 das 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, seguem a ordem correta: nome de secção opcional (section-*), shipping ou billing opcionais, home, work, mobile, fax, ou pager opcionais, e então 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 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: Usar 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>Morada de envio</legend>
  <label for="ship-street">Morada</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>Morada de faturação</legend>
  <label for="bill-street">Morada</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 podem comunicar o propósito de cada campo aos utilizadores, os navegadores podem oferecer preenchimento automático confiável, e os seus formulários cumprem os requisitos do Critério de Sucesso 1.3.5 das 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

→