Skip to main content
Validação HTML

Um elemento “input” com um atributo “type” cujo valor é “hidden” não deve ter quaisquer atributos “aria-*”.

Sobre este problema HTML

Os inputs ocultos são concebidos para transportar dados entre o cliente e o servidor sem qualquer interação do utilizador ou presença visual. O navegador não os renderiza, os leitores de ecrã não os anunciam, e estão completamente excluídos da árvore de acessibilidade. Como os atributos aria-* existem exclusivamente para transmitir informação às tecnologias assistivas, adicioná-los a um elemento que as tecnologias assistivas não conseguem percecionar é contraditório e sem sentido.

A especificação HTML proíbe explicitamente atributos aria-* em elementos input com type="hidden". Esta restrição existe porque os atributos WAI-ARIA — como aria-label, aria-invalid, aria-describedby, aria-required, e todos os outros da família aria-* — destinam-se a melhorar a representação acessível de elementos interativos ou visíveis. Um input oculto não tem tal representação, pelo que estes atributos não têm onde se aplicar.

Esta questão surge frequentemente quando:

  • Frameworks JavaScript ou motores de templates aplicam atributos aria-* indiscriminadamente a todos os inputs de formulário, independentemente do tipo.
  • Um programador altera o tipo de um input de "text" para "hidden" mas esquece-se de remover os atributos de acessibilidade que eram relevantes para a versão visível.
  • Bibliotecas de formulários ou plugins de validação injetam automaticamente atributos como aria-invalid em todos os inputs de um formulário.

Para corrigir a questão, simplesmente remova todos os atributos aria-* de qualquer elemento input que tenha type="hidden". Se o atributo aria-* era significativo num input previamente visível, não é necessária substituição — o input oculto não participa de todo na experiência do utilizador.

Exemplos

Incorreto: input oculto com aria-invalid

<form action="/submit" method="post">
  <input type="hidden" name="referer" value="https://example.com" aria-invalid="false">
  <button type="submit">Submit</button>
</form>

Correto: input oculto sem atributos aria-*

<form action="/submit" method="post">
  <input type="hidden" name="referer" value="https://example.com">
  <button type="submit">Submit</button>
</form>

Incorreto: input oculto com múltiplos atributos aria-*

<form action="/save" method="post">
  <input
    type="hidden"
    name="session_token"
    value="abc123"
    aria-label="Session token"
    aria-required="true"
    aria-describedby="token-help">
  <button type="submit">Save</button>
</form>

Correto: todos os atributos aria-* removidos

<form action="/save" method="post">
  <input type="hidden" name="session_token" value="abc123">
  <button type="submit">Save</button>
</form>

Correto: atributos aria-* num input visível (onde pertencem)

Se o input deve ser visível e acessível, use um valor de type apropriado em vez de "hidden":

<form action="/login" method="post">
  <label for="username">Username</label>
  <input
    type="text"
    id="username"
    name="username"
    aria-required="true"
    aria-invalid="false"
    aria-describedby="username-help">
  <p id="username-help">Enter your registered email or username.</p>
  <button type="submit">Log in</button>
</form>

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.