Valor incorrecto “aria-expanded” para el atributo “aria-expanded” en el elemento “button”.

El atributo aria-expanded comunica a las tecnologías de asistencia si un elemento de agrupación relacionado (como un menú desplegable, panel de acordeón, o sección plegable) está actualmente expandido o colapsado. Solo acepta tres valores válidos:

• "true" — el elemento controlado está expandido y visible.
• "false" — el elemento controlado está colapsado y oculto.
• "undefined" — el elemento no tiene una relación expandible (este es también el valor implícito por defecto cuando el atributo se omite completamente).

Este error de validación ocurre típicamente cuando el atributo se establece accidentalmente con un valor no booleano. Un error común es escribir aria-expanded="aria-expanded", que imita el patrón antiguo de HTML4 para atributos booleanos como checked="checked". Sin embargo, aria-expanded no es un atributo booleano HTML estándar — es un atributo de estado ARIA que requiere un valor de cadena explícito de "true" o "false".

Establecer un valor inválido significa que las tecnologías de asistencia como los lectores de pantalla no pueden interpretar correctamente el estado del control. Un usuario de lector de pantalla puede no saber si un menú está abierto o cerrado, llevando a una experiencia confusa e inaccesible. Los navegadores también pueden manejar el valor inválido de forma impredecible, potencialmente tratándolo como verdadero o ignorándolo completamente.

Cómo solucionarlo

1. Identifica el elemento con el valor inválido de aria-expanded.
2. Reemplaza el valor con "true" si el contenido asociado está actualmente expandido, o "false" si está colapsado.
3. Si el botón no tiene ninguna relación de expandir/colapsar, elimina el atributo aria-expanded completamente.
4. Asegúrate de que la lógica de alternancia JavaScript actualice el atributo a "true" o "false" — nunca a ninguna otra cadena.

Ejemplos

❌ Inválido: atributo establecido con una cadena no booleana

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

El valor "aria-expanded" no es un valor reconocido y desencadena el error de validación.

✅ Corregido: atributo establecido a "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>

✅ Corregido: atributo establecido a "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: otros valores incorrectos comunes

<!-- Usando "yes" en lugar de "true" -->

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

<!-- Usando "1" en lugar de "true" -->

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

<!-- Valor vacío -->

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

Todos estos son inválidos. Los únicos valores aceptados son "true", "false", y "undefined".

✅ Alternancia con JavaScript

Cuando alternes aria-expanded dinámicamente, asegúrate de que el valor siempre se establezca con la cadena correcta:

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

Esto asegura que el atributo siempre alterne entre "true" y "false", manteniendo el marcado válido y la experiencia accesible para todos los usuarios.

Más información:

MDN Reference

MDN: Element.ariaExpanded

→