Pestañas

Ejemplo 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 mueve el foco a la pestaña activa.
• Flecha izquierda mueve el foco a la pestaña anterior, o a la última si el foco está en la primera.
• Flecha derecha mueve el foco a la siguiente pestaña, o a la primera si el foco está en la última.
• Intro o Espacio activa la pestaña si no se ha activado automáticamente al enfocarla.

Puedes ver más información en ARIA Authoring Practices Guide - Tabs.