Acordeón

Estructura del acordeón

Un acordeón está compuesto principalmente por dos elementos:

• Encabezado: es el título o etiqueta que identifica el contenido de cada sección. También actúa como botón para mostrar u ocultar ese contenido.
• Panel: es la zona donde se presenta la información asociada a cada encabezado. Puede estar visible u oculta según el estado del acordeón.

Ejemplo

Podemos crear un acordeón utilizando HTML junto con algunos atributos ARIA para mejorar la accesibilidad.

El atributo role="group" indica que los elementos forman parte de un conjunto relacionado, mientras que aria-label proporciona una descripción para los lectores de pantalla.

El elemento <summary> funciona como botón: contiene el título de cada panel y permite abrirlo o cerrarlo. El contenido asociado se encuentra dentro del elemento <details>.

<div class="accordion" role="group" aria-label="Ejemplo de acordeón">
  <details>
    <summary>Panel #1</summary>
    <p>Contenido del panel #1.</p>
  </details>
  <details>
    <summary>Panel #2</summary>
    <p>Contenido del panel #2.</p>
  </details>
  <details>
    <summary>Panel #3</summary>
    <p>Contenido del panel #3.</p>
  </details>
</div>

Si queremos que el acordeón tenga un comportamiento clásico, es decir, que al abrir un panel se cierre el anterior, podemos añadir unas líneas de JavaScript:

const accordion = document.querySelector(".accordion");
const details = accordion.querySelectorAll("details");

details.forEach((item, index) => {
  item.addEventListener("click", () => {
    details.forEach((el, i) => {
      if (i !== index) {
        el.removeAttribute("open");
      }
    });
  });
});

Interacción con teclado

• Tab y Shift + Tab permiten desplazarse entre los elementos enfocables.
• Intro o Espacio expanden o contraen los paneles.