Saltar al contenido principal

Pestañas

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

Ejemplo
Contenido del tab 1
Contenido del tab 2
Contenido del tab 3
Contenido del tab 4

Nota: Este ejemplo utiliza el plugin jQuery accessible tabs using ARIA de Nicolas Hoffmann.

Este plugin transforma una lista con enlaces ancla al contenido, en un sistema de pestañas accesible. Para ello incluye los siguientes atributos ARIA:

  • El rol tab-list para indicar que se trata de una lista de elementos de tipo pestaña.
  • El rol tab que identifica a los elementos de lista como pestañas que seleccionan el contenido a mostrar.
  • El atributo aria-selected para indicar si un elemento está seleccionado o no.
  • El rol tabpanel que identifica a los paneles de contenido asociados a las pestañas.
  • El atributo aria-labelledby que asocia cada panel de contenido con su pestaña correspondiente.