Acordeón

Estructura del acordeón

El acordeón está formado principalmente por dos elementos:

• Encabezado: es el título o etiqueta que identifica el contenido de la sección. También hace la función de botón para mostrar y ocultar el contenido.
• Panel: es la sección donde se muestra el contenido asociado al encabezado del acordeón. Puede estar visible u oculto.

Ejemplo de acordeón de Bootstrap.

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.

Puedes ver más información en ARIA Authoring Practices Guide - Accordion.