O atributo “aria-required” é desnecessário para elementos que têm o atributo “required”.

O atributo HTML required foi introduzido no HTML5 e informa tanto ao navegador quanto às tecnologias assistivas que um campo de formulário deve ser preenchido antes do formulário poder ser submetido. O atributo aria-required serve o mesmo propósito mas vem da especificação WAI-ARIA, que foi desenhada para preencher lacunas de acessibilidade no HTML. Agora que o required é amplamente suportado, usar ambos os atributos no mesmo elemento é duplicação desnecessária.

O validador W3C levanta este aviso porque atributos ARIA redundantes adicionam ruído à sua marcação sem fornecer qualquer benefício. Um dos princípios fundamentais do uso de ARIA é a primeira regra de ARIA: se você pode usar um elemento ou atributo HTML nativo que já tem a semântica que precisa, use isso em vez de adicionar ARIA. O atributo nativo required fornece validação integrada do navegador, dicas visuais e informação de acessibilidade tudo de uma vez — algo que apenas aria-required não consegue fazer.

Leitores de ecrã modernos como NVDA, JAWS e VoiceOver interpretam corretamente o atributo nativo required e anunciam o campo como obrigatório aos utilizadores. Manter ambos os atributos não causa um problema funcional, mas cria sobrecarga de manutenção, desorganiza o seu código e sinaliza a outros programadores que algo especial pode estar a acontecer quando não está.

Como corrigir

1. Se o seu elemento já tem o atributo required, remova aria-required="true".
2. Se o seu elemento tem apenas aria-required="true" e você quer validação nativa do navegador, substitua-o por required.
3. Em casos raros onde precisa de suportar tecnologias assistivas que não reconhecem o atributo nativo required (algumas versões muito antigas de leitores de ecrã), manter ambos é uma escolha consciente — mas para a vasta maioria dos projetos, apenas o atributo nativo é suficiente.

Exemplos

❌ aria-required redundante junto com required

<form action="/order">
  <label for="city">City</label>
  <input id="city" name="city" type="text" aria-required="true" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" aria-required="true" required>

  <label for="comments">Comments</label>
  <textarea id="comments" name="comments" aria-required="true" required></textarea>

  <button type="submit">Submit</button>
</form>

Isto desencadeia o aviso do validador em cada elemento onde ambos os atributos aparecem.

✅ Usar apenas o atributo nativo required

<form action="/order">
  <label for="city">City</label>
  <input id="city" name="city" type="text" required>

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

  <label for="comments">Comments</label>
  <textarea id="comments" name="comments" required></textarea>

  <button type="submit">Submit</button>
</form>

✅ Usar aria-required num elemento não nativo

Existem casos de uso válidos para aria-required — especificamente quando constrói controlos de formulário personalizados que não usam elementos de formulário nativos. Nesse cenário, aria-required é a escolha correta porque o atributo nativo required não tem efeito em elementos que não são de formulário.

<div role="combobox" aria-required="true" aria-expanded="false" aria-labelledby="color-label">
  <span id="color-label">Favorite color</span>
</div>

Aqui, aria-required="true" é necessário porque um <div> não suporta o atributo nativo required.

Saiba mais:

MDN Reference

MDN: aria-required

→

W3C Reference

W3C: aria-required

→