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.