Acordeón

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

Ejemplo
Texto de ejemplo panel #1.
Texto de ejemplo panel #2.
Texto de ejemplo panel #3
HTML
<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