Sobre este problema HTML
O atributo aria-required é uma propriedade WAI-ARIA que sinaliza às tecnologias assistivas (como leitores de ecrã) que um utilizador deve fornecer um valor para um controlo de formulário antes de o formulário poder ser submetido. De acordo com a especificação ARIA, o valor do atributo deve ser "true" ou "false". Qualquer outro valor — como "yes", "1", "", ou um erro ortográfico — é inválido e produzirá este erro de validação.
Erros comuns incluem escrever aria-required="yes", aria-required="", aria-required="required", ou mesmo aria-required="True" (nota: o valor é sensível a maiúsculas e minúsculas e deve estar em minúsculas).
Porque isto é importante
Quando um valor inválido é usado, as tecnologias assistivas podem não interpretar corretamente se o campo é obrigatório. Isto pode levar a uma experiência confusa para utilizadores que dependem de leitores de ecrã, pois podem não ser informados de que um campo é obrigatório antes de submeter um formulário. Usar valores de atributo válidos garante um comportamento consistente e previsível em todos os navegadores e tecnologias assistivas.
Quando usar aria-required vs. required
Para elementos HTML nativos de formulário como <input>, <select>, e <textarea>, você deve usar o atributo HTML required integrado. Ele fornece tanto o comportamento de validação como a informação de acessibilidade prontos a usar, sem necessidade de ARIA.
O atributo aria-required destina-se a controlos de formulário personalizados (não semânticos) — por exemplo, um <div> com role="textbox" ou role="combobox". Nestes casos, o navegador não sabe que o elemento é um controlo de formulário, pelo que aria-required="true" comunica o requisito às tecnologias assistivas.
Exemplos
❌ Valores inválidos para aria-required
<!-- "yes" não é um valor válido -->
<div
role="textbox"
contenteditable
aria-labelledby="name_label"
aria-required="yes">
</div>
<!-- String vazia não é válida -->
<input type="text" aria-required="">
<!-- "required" não é válido -->
<input type="email" aria-required="required">
✅ Uso correto com aria-required
<div id="email_label">Endereço de Email *</div>
<div
role="textbox"
contenteditable
aria-labelledby="email_label"
aria-required="true"
id="email">
</div>✅ Marcar explicitamente um campo como não obrigatório
<div id="notes_label">Notas (opcional)</div>
<div
role="textbox"
contenteditable
aria-labelledby="notes_label"
aria-required="false"
id="notes">
</div>✅ Abordagem preferida para elementos de formulário nativos
Ao usar controlos HTML padrão de formulário, omita aria-required e use o atributo required nativo:
<label for="email">Endereço de Email *</label>
<input type="email" id="email" name="email" required>
<label for="country">País *</label>
<select id="country" name="country" required>
<option value="">Selecione um país</option>
<option value="us">Estados Unidos</option>
<option value="uk">Reino Unido</option>
</select>
O atributo required nativo transmite automaticamente o estado obrigatório às tecnologias assistivas e também aciona a validação integrada do navegador, tornando-o a melhor escolha sempre que um elemento de formulário nativo esteja disponível.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.