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-invalidem 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.