Acordeón
Un acordeón está formado por regiones desplegables que permiten mostrar u ocultar contenido pulsando sobre un botón.
Texto de ejemplo panel #1.
Texto de ejemplo panel #2.
Texto de ejemplo panel #3
<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
yid
. - Opcionalmente podemos asociar el elemento de control y el panel de contenido con
id
yaria-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.
Nota: Puedes ver más información en WAI-ARIA Authoring Practices 1.1 - Accordion.