Diseño Normalizado de Trámites Electrónicos
Inicio
Primeros pasos
Primeros pasos
¿Qué es DINTEL?
Diseñadores
Desarrolladores
Recursos
Preguntas frecuentes
Fundamentos
Fundamentos
Color
Tipografía
Elevaciones
Espaciado
Retícula
Borde
Radio
Iconografía
Ilustraciones
Animación
Accesibilidad
Tokens de diseño
Contenidos digitales
Visualización de datos
Elementos de interfaz
Elementos de interfaz
Módulos
Plantillas
Componentes
Actualizaciones
Contacto
Elementos de interfaz
Componentes
Pestañas
Pestañas
El componente Tabs se utiliza para agrupar diferentes contenidos de una misma temática dentro de una sección. Permite al usuario navegar de manera sencilla entre las diferentes secciones de una página.
Usos
Como usar
Usa pestañas para agrupar información relacionada en diferentes categorías, lo que ayuda a reducir la carga cognitiva.
Las pestañas se pueden usar para organizar contenido como formularios, configuraciones y tableros para que un usuario no tenga que navegar fuera de su flujo de trabajo para completar su tarea.
Como no usar
Las pestañas nunca deben usarse para la navegación principal. Si las pestañas se vuelven demasiado complejas, considere usar otro patrón de navegación.
Las pestañas no deben usarse para indicar el progreso. Utilice steps en su lugar.
Comportamiento
Tipo
Text Only
Icon Left
Text + Tag
Icon Left + Tag
Estados
Default
Hover
Focus
Selected
Disabled
Responsive
El comportamiento en su versión móvil cambia en el ultimo elemento, agrupando en un dropdown las pestañas que no entran en pantalla pudiendo acceder a ellas y seleccionarlas. Las pestañas a visualizar serán 1 ó 2 dependiendo de la longitud de sus textos.
Mostrar una tab para textos largos
Mostrar 2 tabs para textos cortos
Accesibilidad
Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.
El componente de grupo de pestañas utiliza role="tablist" para transmitir correctamente su funcionalidad a las tecnologías de asistencia.
Cada elemento que sirve de pestaña tiene rol="tab" y está contenido dentro del elemento con rol="tablist".
Cada elemento que contiene el panel de contenido de una pestaña tiene el rol="tabpanel".
Como la lista de pestañas tiene una etiqueta visible, el elemento con rol tablist tiene aria-labelledby establecido a un valor que hace referencia al elemento de etiquetado.
Cada elemento con rol="tab" tiene la propiedad aria-controls que hace referencia a su elemento tabpanel asociado.
El elemento de pestaña activo tiene el estado aria-selected establecido en true y todos los demás elementos de pestaña lo tienen establecido en false.
Cada elemento con rol="tabpanel" tiene la propiedad aria-labelledby que hace referencia a su elemento tab asociado.
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
