Verificação HTML: Valor inválido "alert" para o atributo "role" no elemento "ul".

Sobre este problema HTML

O papel ARIA alert é usado para comunicar mensagens importantes, normalmente sensíveis ao tempo, ao utilizador. Quando um elemento tem role="alert", as tecnologias assistivas como leitores de ecrã irão anunciar imediatamente o seu conteúdo ao utilizador, interrompendo o que estão a fazer no momento. Isto torna-o ideal para mensagens de erro, avisos, ou atualizações de estado que requerem atenção imediata.

Contudo, nem todos os elementos HTML podem aceitar todos os papéis ARIA. A especificação WHATWG HTML e WAI-ARIA in HTML definem regras sobre quais papéis são permitidos em quais elementos. O elemento <ul> tem um papel implícito de list, e o papel alert não está entre os papéis permitidos em <ul>. Esta restrição existe porque sobrepor o significado semântico de um elemento de lista com um papel de alerta cria um conflito — as tecnologias assistivas deixariam de transmitir a estrutura da lista aos utilizadores, e os elementos filhos (<li>) perderiam o seu contexto significativo como itens de lista.

Isto é importante para a acessibilidade e conformidade com os padrões. Se um leitor de ecrã encontrar um <ul> com role="alert", o comportamento torna-se imprevisível. Alguns leitores de ecrã podem anunciá-lo como um alerta mas falhar em transmitir a estrutura da lista, enquanto outros podem ignorar completamente o papel. Utilizadores que dependem de tecnologia assistiva podem perder quer o alerta quer a semântica da lista, ambos podendo ser importantes.

A correção depende da sua intenção. Se precisa de alertar o utilizador sobre conteúdo que por acaso inclui uma lista, envolva o <ul> num elemento contentor (como um <div>) e aplique role="alert" a esse contentor. Se o conteúdo não precisa de ser uma lista, substitua o <ul> por um elemento mais apropriado como <div> ou <p>.

Exemplos

❌ Inválido: `role="alert"` diretamente num `<ul>`

<ul role="alert">
  <li>Your password must be at least 8 characters.</li>
  <li>Your password must contain a number.</li>
</ul>

Isto desencadeia o erro de validação porque alert não é um papel válido para o elemento <ul>.

✅ Corrigido: Envolver a lista num `<div>` com `role="alert"`

<div role="alert">
  <ul>
    <li>Your password must be at least 8 characters.</li>
    <li>Your password must contain a number.</li>
  </ul>
</div>

Aqui, o <div> carrega o role="alert", então as tecnologias assistivas irão anunciar o conteúdo imediatamente. O <ul> mantém a sua semântica nativa de list, e os itens <li> são adequadamente transmitidos como itens de lista.

✅ Corrigido: Usar um elemento que não seja lista quando a estrutura de lista não é necessária

<div role="alert">
  <p>Your session will expire in 2 minutes.</p>
</div>

Se o seu conteúdo de alerta é uma mensagem simples em vez de uma lista de itens, use um elemento mais apropriado como <p> ou <div>.

✅ Corrigido: Usar `aria-live` como alternativa para atualizações dinâmicas

<div aria-live="assertive" role="alert">
  <ul>
    <li>Error: Email address is required.</li>
    <li>Error: Name field cannot be empty.</li>
  </ul>
</div>

O atributo aria-live="assertive" no contentor garante que quando o conteúdo é atualizado dinamicamente, as tecnologias assistivas anunciam as alterações imediatamente. Combinado com role="alert" no contentor (não na lista), isto fornece notificações acessíveis robustas enquanto preserva a semântica da lista.

Pontos-chave a recordar

O atributo role="alert" não pode ser colocado em elementos <ul>, <ol>, ou <li>.
Aplique sempre role="alert" a um elemento contentor genérico como <div> ou <span>.
Se o seu conteúdo de alerta inclui uma lista, aninhe a lista dentro do contentor de alerta em vez de fazer da própria lista o alerta.
O papel alert define implicitamente aria-live="assertive" e aria-atomic="true", então não precisa de adicionar esses separadamente quando usar role="alert".