Tab

Las tabs son elementos de navegación que permiten interactuar entre diferentes contenidos dentro de una misma página o contexto.

Racional de aplicación

Usamos las tabs para crear una navegación de nivel inferior a la navegación principal del site, que sirva para diferenciar contenido dentro de un mismo contexto o también para:

• Facilitar la lectura y entendimiento de la información.

• Agrupar información dentro de una navegación con un mismo contexto.

• Dividir un mismo contenido por bloques.

• Creación de navegación de segundo o tercer nivel.

Para evitar problemas en la experiencia del usuario, no usamos Tabs:

• En niveles principales de navegación.

• Para crear niveles de navegación dentro de otra Tab.

• Para desglosar información sin relación ni contexto común.

• Alternar entre opciones de visualización.

• Para desglosar información en numerosos bloques.

Buenas prácticas

Los elementos de navegación tienen que tener relación entre ellas dentro del mismo contexto.

En un grupo de navegación, todas las opciones tiene que tener sentido en el contexto.

No usamos tabs para mostrar varios niveles de navegación.

Interacción

Este componente ha sido validado para cumplir con las pautas de accesibilidad WCAG 2.1 AA, sin embargo los cambios realizados por el propietario del contenido pueden afectar el cumplimiento de la accesibilidad. Hay que asegurarse de revisar y seguir las instrucciones de esta sección cuando se actualice o se agregue contenido nuevo a este componente.

Dispositivo	Interacción
Ratón	Se puede activar un tab haciendo clic en cualquier lugar dentro del componente.
Teclado	Se puede utilizar el tabulador para desplazarse dentro de un grupo de tabs y activarlos con la barra espaciadora del teclado.

Anatomía y variabilidad

Anatomía del componente

Letra	Elemento	Descripción
A	Etiqueta	Es el literal de información para el contenido que va a mostrarse.
B	Selector de activación	Indica que ese Tab es el seleccionado dentro del grupo en el que se encuentra.

Variabilidad de estados

Letra	Estado	Descripción
A	Default	Estado por defecto, el Tab está disponible para ser seleccionado.
B	Hover	Visible al posicionar el cursor del mouse encima del Tab.
C	Active	Activado por mouse con click o tabulador.
D	Disabled	Estado no disponible, normalmente atenuado visualmente.