Pestañas

Las pestañas (tabs) permiten alternar entre varios paneles de información dentro de una misma ventana.

Ejemplo
Texto de ejemplo pestaña 1.
Texto de ejemplo pestaña 2.
Texto de ejemplo pestaña 3.
HTML
<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a href="#tab-1"
           class="nav-link active"
           id="label-tab-1"
           role="tab"
           aria-controls="tab-1"
           aria-selected="true">
           Tab 1
        </a>
    </li>
    ...
</ul>
<div class="tab-content p-3" id="myTabContent">
    <div class="tab-pane fade show active"
       id="tab-1"
       role="tabpanel"
       aria-labelledby="label-tab-1">
       Texto de ejemplo pestaña 1.
    </div>
    ...
</div>

Ejemplo tomado de pestañas de Bootstrap.

Atributos WAI-ARIA

  • El elemento que contiene las pestañas tiene el rol tablist.
  • Cada pestaña tiene el rol tab y la propiedad aria-controls para asociarla con su panel correspondiente.
  • El estado aria-selected indica si la pestaña está activa o no mediante los valores true or false.
  • Cada panel tiene el rol tabpanel y está asociado con su pestaña correspondiente mediante la propiedad aria-labelledby.

Interacción con teclado

  • Tab y Shift + Tab para moverse por las pestañas cambiando el foco.
  • Intro o Espacio activa la pestaña si no se ha activado automáticamente al enfocarla.
  • Flecha izquierda para moverse a la pestaña anterior y Flecha derecha para moverse a la pestaña siguiente (el ejemplo de Bootstrap mostrado en esta página no permite este tipo de navegación).

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