Links

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.
脷ltima actualizaci贸n 1yr ago