Verificação HTML: O role "form" é desnecessário para o elemento "form".

Sobre este problema HTML

Muitos elementos HTML vêm com roles ARIA incorporados (implícitos) que os navegadores e tecnologias assistivas já reconhecem. O elemento <form> mapeia nativamente para o role ARIA form, o que significa que leitores de ecrã e outras ferramentas já o compreendem como um ponto de referência de formulário sem quaisquer atributos extra. Quando adiciona explicitamente role="form" a um elemento <form>, está a dizer ao navegador algo que ele já sabe.

Esta redundância é problemática por várias razões:

Clareza do código: Atributos desnecessários tornam o seu HTML mais difícil de ler e manter. Outros programadores podem questionar-se se o role explícito está lá para sobrepor algo ou se serve um propósito especial.
Intenção enganadora: Os roles ARIA explícitos são tipicamente reservados para casos onde precisa de sobrepor ou complementar a semântica predefinida de um elemento. Usá-los desnecessariamente pode sinalizar aos futuros mantenedores que algo incomum está a acontecer quando não está.
Melhores práticas de ARIA: A primeira regra de ARIA é “não use ARIA se pode usar um elemento ou atributo HTML nativo com a semântica e comportamento que necessita.” Adicionar roles ARIA redundantes vai contra este princípio.

Vale a pena notar que o role form implícito do elemento <form> apenas o expõe como um ponto de referência quando o formulário tem um nome acessível (por exemplo, via aria-label ou aria-labelledby). Se precisar que o seu formulário apareça como uma região de ponto de referência, forneça um nome acessível em vez de adicionar um role redundante.

Para corrigir esta questão, simplesmente remova role="form" de qualquer elemento <form>. Se pretender que o formulário funcione como um ponto de referência nomeado para utilizadores de tecnologia assistiva, adicione um nome acessível em vez disso.

Exemplos

❌ Incorreto: `role="form"` redundante

<form role="form" action="/subscribe" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <button type="submit">Subscribe</button>
</form>

Isto despoleta o aviso do validador porque role="form" duplica o role implícito do elemento.

✅ Correto: sem role explícito

<form action="/subscribe" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <button type="submit">Subscribe</button>
</form>

O elemento <form> já comunica o seu role nativamente. Não é necessário nenhum atributo ARIA.

✅ Correto: formulário com um nome acessível para navegação por pontos de referência

<form action="/subscribe" method="post" aria-label="Newsletter subscription">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <button type="submit">Subscribe</button>
</form>

Se pretender que o formulário seja descobrível como um ponto de referência nomeado pelos utilizadores de leitores de ecrã, forneça um atributo aria-label ou aria-labelledby — não um role redundante.

Outros elementos com roles implícitos

O mesmo princípio aplica-se a muitos outros elementos HTML. Evite adicionar roles redundantes como estes:

<!-- ❌ Roles redundantes -->

<nav role="navigation">...</nav>
<main role="main">...</main>
<header role="banner">...</header>
<footer role="contentinfo">...</footer>
<button role="button">Click me</button>

<!-- ✅ Deixe que a semântica nativa faça o trabalho -->

<nav>...</nav>
<main>...</main>
<header>...</header>
<footer>...</footer>
<button>Click me</button>

Confie na semântica nativa dos elementos HTML. Use roles ARIA explícitos apenas quando genuinamente precisar de alterar ou complementar o comportamento predefinido de um elemento.