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

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 el atributo name con el mismo valor en todos los elementos <details>.

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

Interacción con teclado

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