Los acordeones solían ser trescientas líneas de JavaScript para el trabajo de dos etiquetas. Pon el mismo atributo name en un grupo de <details> y el navegador abre uno y cierra los demás por ti.

<details name="faq" open>
  <summary>What makes this an accordion?</summary>
  <p>The name attribute groups the panels; opening one closes the rest.</p>
</details>
<details name="faq">
  <summary>Works without JavaScript?</summary>
  <p>It never needed any.</p>
</details>

Qué hace el navegador por ti

  • Teclado: la pestaña llega a todos los resúmenes, se alterna Intro o Espacio, no existe ningún código de captura de enfoque que pueda equivocarse.
  • Los lectores sin JavaScript obtienen la experiencia completa, porque no hay nada que un script deshabilitado pueda romper.
  • Los motores de búsqueda leen el contenido de cualquier manera: los paneles son DOM reales, no un div oculto esperando hidratación.

Actualizar un acordeón viejo

  1. Sustituye el script por un <details> por panel, todos compartiendo un mismo valor de name.
  2. Mueve el texto del botón antiguo al <summary>; el icono de flecha se queda en CSS.
  3. Borra el handler de clic y los atributos de estado ARIA; <summary> ya es el toggle.
  4. Solo teclado de prueba: se puede acceder a todos los resúmenes, solo se abre un panel por grupo.

¿Necesitas animación? Decora las transiciones detalladas[abiertas] en CSS y deja que el navegador mantenga el estado. El resultado genial: menos código y acceso más amplio en lugar de menos acceso.