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
Pasos
Pasos
Los botones “paso a paso” o stepper, muestra el progreso a través de una secuencia de pasos lógicos y numerados. Los steppers pueden mostrar un mensaje de retroalimentación transitorio después de guardar un paso.
Usos
Como usar
Los steppers muestran el progreso a través de una secuencia al dividirla en múltiples pasos lógicos y numerados.
Como no usar
Evitar su uso si el proceso no se divide naturalmente en pasos o si el proceso es tan simple que no necesita ser dividido en pasos.
No utilizar un stepper si el proceso es tan complejo que no puede ser explicado de manera clara y concisa en cada uno de los pasos.
Comportamiento
Tipo
Horizontal
Estados
Default
Current
Error
Success
Responsive
Mobile
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.
Stepper se encapsulan en una lista ordenada ol.
Stepper tiene role="region".
Stepper cuenta con el estado aria-current en el step actual para representar en cual de ellos se encuentra el usuario.
Tambien cuenta con el atributo aria-selected para idnicar el estado "seleccionado" actual de lso steps.
Los steps tienen la propiedad tabindex=”0” para poder acceder a ellos.
Los iconos de status cuentan con un aria-label.
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
