Verificação HTML: Valor inválido "" para o atributo "aria-controls" no elemento "a": um valor IDREFS deve conter pelo menos um caráter que não seja espaço em branco.

Sobre este problema HTML

O erro de validação ocorre quando um elemento como a, button ou widget personalizado inclui aria-controls="" (vazio) ou apenas espaços em branco. O atributo aria-controls aceita um ou mais valores id separados por espaços (IDREFS). Cada id referenciado deve existir exatamente uma vez no mesmo documento. Deixá-lo vazio viola os requisitos ARIA e HTML e não fornece uma relação utilizável para tecnologias assistivas.

Por que isto é importante:

Acessibilidade: leitores de ecrã dependem de aria-controls para anunciar relações entre controlos e regiões controladas (p. ex., um alternador e o seu painel). Um valor vazio engana as tecnologias assistivas ou adiciona ruído.
Conformidade com padrões: HTML e ARIA requerem pelo menos um id que não seja espaço em branco. Valores vazios causam falhas de validação.
Robustez: referências incorretas podem confundir scripts e futuros mantenedores, e quebrar o comportamento quando os IDs mudam.

Como corrigir:

Apenas adicione aria-controls quando o elemento realmente controlar outra região (mostrar/ocultar, ordenar, atualizar).
Certifique-se de que o elemento controlado tem um id único.
Defina aria-controls para esse id (ou múltiplos IDs separados por espaços).
Mantenha a referência sincronizada se os IDs mudarem.
Se nada for controlado, remova aria-controls inteiramente.

Exemplos

Inválido: `aria-controls` vazio (desencadeia o erro)

<a href="#" aria-controls="">Toggle details</a>

Válido: controlar uma única região

<div id="details-panel" hidden>
  Some details...
</div>
<a href="#details-panel" aria-controls="details-panel">Toggle details</a>

Válido: controlar múltiplas regiões (IDs separados por espaços)

<section id="filters" hidden>...</section>
<section id="results" hidden>...</section>
<button type="button" aria-controls="filters results">Show filters and results</button>

Válido: remover quando não necessário

<a href="#">Toggle details</a>

Documento completo mínimo com uso adequado

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>aria-controls Example</title>
  </head>
  <body>
    <button type="button" aria-controls="info" aria-expanded="false">Toggle info</button>
    <div id="info" hidden>
      Extra information.
    </div>
    <script>
      const btn = document.querySelector('button');
      const panel = document.getElementById(btn.getAttribute('aria-controls'));
      btn.addEventListener('click', () => {
        const expanded = btn.getAttribute('aria-expanded') === 'true';
        btn.setAttribute('aria-expanded', String(!expanded));
        panel.hidden = expanded;
      });
    </script>
  </body>
</html>

Dicas:

Use aria-controls para relações funcionais (o controlo afeta o conteúdo), não apenas proximidade visual.
Combine com aria-expanded ao alternar visibilidade para comunicar o estado.
Verifique se cada id em aria-controls existe e é único; evite incompatibilidades dinâmicas criadas por templating ou reutilização de componentes.