Tab
Las tabs son elementos de navegación que permiten interactuar entre diferentes contenidos dentro de una misma página o contexto.
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.
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.
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. |
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. |
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