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
Desplegable
Desplegable
Un menú desplegable muestra una lista de opciones del cual el usuario puede seleccionar una o varias en función de su tipo.
Usos
Cuándo usar
Cuando necesitamos mostrar un listado de acciones o enlaces.
Cuándo no usar
Cuando necesitemos un elemento de formulario (mejor usar select).
Cuando queremos seleccionar múltiples opciones
Buenas prácticas
Se pueden desplegar varios elementos.
Evitar textos que ocupen más de una linea.
Utilizar iconos cuando exista un valor añadido en el uso del icono y no solo fines ilustrativos.
Ordenar las opciones en un orden lógico colocando la opción más seleccionada en la parte superior, si la conocemos.
Para las opciones de acción utilizar verbos que describan la acción, por ejemplo “Mover” , Ocultar capas”.
En la mayoría de los casos, los enlaces deben ser sustantivos, por ejemplo “Perfil”.
En los casos de tener acciones deshabilitadas, debemos mostrarlas ya que ayudan al usuario a saber que existen en las condiciones adecuadas.
Comportamiento
Estados
Default
Hover
Focus
Pressed
Select
Disabled
Tipos de selección
Selección única
Selección única + icono
Selección múltiple
Tamaños de botón
Por defect
Compacto
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 elemento que muestra y oculta el contenido tiene role="button".
Cuando el contenido es visible, el elemento con role="button" tiene aria-expanded establecido a true. Cuando el área de contenido está oculta, tiene el valor false.
El elemento con role="button" tiene un valor especificado para aria-controls que hace referencia al elemento que contiene todo el contenido que se muestra u oculta.
El elemento con role="button" tiene tabindex="0" para hacer posible acceder a él usando la tecla de tabulación o mover el foco mediante programación.
El elemento con role="button" tiene el atributo aria-haspopup="menu" que indica la disponibilidad y el tipo de elemento emergente interactivo que puede ser activado.
El dropdown tiene la propiedad aria-activedescendant para identificar el elemento actualmente activo cuando el foco está en el dropdown.
Cada item del dropdown tiene role=”menuitem”.
Cada item del dropdown tiene tabindex=”0” para poder acceder a él.
Cada item del dropdown tiene la propiedad aria-disabled para saber si está deshabilitado.
Cada item del dropdown tiene la propiedad aria-current para saber si está seleccionado.
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
