Verificação HTML: Valor inválido "aria-expanded" para o atributo "aria-expanded" no elemento "button".

Sobre este problema HTML

O atributo aria-expanded comunica às tecnologias assistivas se um elemento de agrupamento relacionado (como um menu dropdown, painel de acordeão, ou secção colapsável) está atualmente expandido ou colapsado. Aceita apenas três valores válidos:

"true" — o elemento controlado está expandido e visível.
"false" — o elemento controlado está colapsado e oculto.
"undefined" — o elemento não tem relação expansível (este é também o padrão implícito quando o atributo é omitido completamente).

Este erro de validação ocorre tipicamente quando o atributo é acidentalmente definido com um valor não-booleano. Um erro comum é escrever aria-expanded="aria-expanded", que imita o padrão HTML4 antigo para atributos booleanos como checked="checked". No entanto, aria-expanded não é um atributo booleano HTML padrão — é um atributo de estado ARIA que requer um valor de string explícito de "true" ou "false".

Definir um valor inválido significa que as tecnologias assistivas como leitores de ecrã não conseguem interpretar corretamente o estado do controlo. Um utilizador de leitor de ecrã pode não saber se um menu está aberto ou fechado, levando a uma experiência confusa e inacessível. Os navegadores também podem lidar com o valor inválido de forma imprevisível, potencialmente tratando-o como verdadeiro ou ignorando-o completamente.

Como corrigir

Identifique o elemento com o valor inválido de aria-expanded.
Substitua o valor por "true" se o conteúdo associado está atualmente expandido, ou "false" se está colapsado.
Se o botão não tem qualquer relação de expandir/colapsar, remova o atributo aria-expanded completamente.
Certifique-se de que a lógica JavaScript de alternância atualiza o atributo para "true" ou "false" — nunca para qualquer outra string.

Exemplos

❌ Inválido: atributo definido com uma string não-booleana

<button aria-expanded="aria-expanded" aria-controls="menu">
  Toggle Menu
</button>
<ul id="menu">
  <li>Option 1</li>
  <li>Option 2</li>
</ul>

O valor "aria-expanded" não é um valor reconhecido e desencadeia o erro de validação.

✅ Corrigido: atributo definido como `"false"` (estado colapsado)

<button aria-expanded="false" aria-controls="menu">
  Toggle Menu
</button>
<ul id="menu" hidden>
  <li>Option 1</li>
  <li>Option 2</li>
</ul>

✅ Corrigido: atributo definido como `"true"` (estado expandido)

<button aria-expanded="true" aria-controls="menu">
  Toggle Menu
</button>
<ul id="menu">
  <li>Option 1</li>
  <li>Option 2</li>
</ul>

❌ Inválido: outros valores incorretos comuns

<!-- Usar "yes" em vez de "true" -->

<button aria-expanded="yes">Details</button>

<!-- Usar "1" em vez de "true" -->

<button aria-expanded="1">Details</button>

<!-- Valor vazio -->

<button aria-expanded="">Details</button>

Todos estes são inválidos. Os únicos valores aceites são "true", "false", e "undefined".

✅ Alternar com JavaScript

Quando alterar aria-expanded dinamicamente, certifique-se de que o valor é sempre definido com a string correta:

<button aria-expanded="false" aria-controls="panel" onclick="togglePanel(this)">
  Show details
</button>
<div id="panel" hidden>
  <p>Additional details here.</p>
</div>

<script>
  function togglePanel(button) {
    const expanded = button.getAttribute("aria-expanded") === "true";
    button.setAttribute("aria-expanded", String(!expanded));
    const panel = document.getElementById(button.getAttribute("aria-controls"));
    panel.hidden = expanded;
  }
</script>

Isto garante que o atributo alterna sempre entre "true" e "false", mantendo a marcação válida e a experiência acessível para todos os utilizadores.