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
Árbol
Árbol
El árbol es una visualización de una estructura jerárquica. Cada nivel se puede expandir, ver sus subniveles y poder navegar al hacer click en ellos.
Usos
Como usar
Para organizar grandes cantidades de información que pueden anidar en múltiples niveles.
Como no usar
Cuando solo necesita unos nivel de información anidada. Para este caso sería mejor usar el acordeón.
Como navegación principal en la interfaz de un producto.
Comportamiento
Tipo
Desplegable
Se utiliza cuando tiene niveles por debajo en la jerarquía.
Navegable
Se utiliza cuando no tenga niveles por debajo en la jerarquía.
Estado
Default
Open
Hover
Focus
Pressed
Disable
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 sirve como menú tiene rol="menu".
Los elementos contenidos en el menú son elementos hijos y tienen role="menuitem".
Los elementos con role="menuitem" tienen el atributo aria-posinset, que define el número o la posición de un elemento en el conjunto actual de listitems cuando no todos los elementos están presentes en el DOM.
Cada elemento del menú tiene tabindex=0 y aria-hidden establecida en false cuando son visibles.
Si el elemento está deshabilitado tiene la propiedad aria-disabled a true.
Si el elemento está deshabilitado se puede añadir un texto descriptivo que acompañará a un componente tooltip, con la propiedad aria-describedby
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
