Validación HTML: Valor incorrecto "" para el atributo "aria-controls" en el elemento "a": Un valor IDREFS debe contener al menos un carácter que no sea espacio en blanco.

Acerca de este problema HTML

El error del validador ocurre cuando un elemento como a, button, o un widget personalizado incluye aria-controls="" (vacío) o solo espacios en blanco. El atributo aria-controls toma uno o más valores id separados por espacios (IDREFS). Cada id referenciado debe existir exactamente una vez en el mismo documento. Dejarlo vacío viola los requisitos de ARIA y HTML y no proporciona ninguna relación útil para las tecnologías de asistencia.

Por qué esto importa:

Accesibilidad: Los lectores de pantalla dependen de aria-controls para anunciar relaciones entre controles y regiones controladas (por ejemplo, un botón de alternar y su panel). Un valor vacío engaña a las tecnologías de asistencia o añade ruido.
Cumplimiento de estándares: HTML y ARIA requieren al menos un id que no sea espacio en blanco. Los valores vacíos causan fallos de validación.
Robustez: Las referencias incorrectas pueden confundir scripts y futuros mantenedores, y romper el comportamiento cuando los IDs cambian.

Cómo solucionarlo:

Solo añade aria-controls cuando el elemento realmente controle otra región (mostrar/ocultar, ordenar, actualizar).
Asegúrate de que el elemento controlado tenga un id único.
Establece aria-controls con ese id (o múltiples IDs separados por espacios).
Mantén la referencia sincronizada si los IDs cambian.
Si no se controla nada, elimina aria-controls completamente.

Ejemplos

Inválido: `aria-controls` vacío (desencadena el error)

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

Válido: controlar una sola región

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

Válido: controlar múltiples regiones (IDs separados por espacios)

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

Válido: eliminar cuando no sea necesario

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

Documento completo mínimo con uso apropiado

<!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>

Consejos:

Usa aria-controls para relaciones funcionales (el control afecta al contenido), no solo proximidad visual.
Combina con aria-expanded cuando alternes la visibilidad para comunicar el estado.
Verifica que cada id en aria-controls exista y sea único; evita desajustes dinámicos creados por plantillas o reutilización de componentes.