Saltar al contenido principal

Acordeón

Un acordeón está formado por regiones desplegables que permiten mostrar u ocultar contenido pulsando sobre un botón.

Atributos WAI-ARIA

  • El elemento de control es un botón, en caso de utilizar otro elemento tenemos que añadir el atributo role="button".
  • El botón de control está contenido dentro de un elemento con rol heading, como los encabezados HTML (h1 - h6).
  • El atributo aria-expanded nos indica si el panel del acordeón está expandido o no.
  • El botón de control está asociado con el panel de contenido mediante aria-controls y id.

Interacción con teclado

  • Tab y Shift + Tab para moverse por los diferentes elementos enfocables.
  • Intro o Espacio para expandir o contraer los paneles.

Nota: Puedes ver más información en WAI-ARIA Authoring Practices 1.1 - Accordion.