Acordeón

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

<div class="accordion">
    <div class="card">
        <div class="card-header">
            <h3>
                <a href="#collapseOne"
                   role="button"
                   class="collapsed"
                   aria-expanded="false"
                   aria-controls="collapseOne"
                   Título Panel #1
                </a>
            </h3>
        </div>

        <div id="collapseOne"
             class="collapse">
            <div class="card-body">
                Texto de ejemplo panel #1.
            </div>
        </div>
    </div>
    ...
</div>

Ejemplo tomado del acordeón de Bootstrap.

Atributos WAI-ARIA

• El elemento de control debe ser 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 indica si el panel del acordeón está contraído o expandido.
• El botón de control está asociado con el panel de contenido mediante aria-controls y id.
• Opcionalmente podemos asociar el elemento de control y el panel de contenido con id y aria-labelledby.

Interacción con teclado

• Tab y Shift + Tab para moverse por los diferentes elementos enfocables.
• Intro o Espacio para expandir o contraer los paneles.
• Opcionalmente se pueden usar las teclas Flecha arriba y Flecha abajo para moverse por los encabezados del acordeón.

Ver más información en WAI-ARIA Authoring Practices 1.1 - Accordion.

Criterios de conformidad WCAG 2.1

• 4.1.2 Name, Role, Value (A)