Recomendado: Agrupa contenido relacionado
Organiza en un mismo acordeón secciones que pertenezcan al mismo tema y tengan una relación clara entre sí. Evita mezclar contenidos distintos solo para reducir espacio.
Accordion
El acordeón organiza contenido en paneles que pueden abrirse y cerrarse. Es útil para información de consulta que no necesita estar visible todo el tiempo.
Anatomía del componente
Cargando anatomía…
- Contenedor
- Ítem
- Encabezado
- Ícono inicial
- Título
- Indicador de apertura
- Contenido
Propiedades y configuraciones
Múltiple
El acordeón puede permitir, opcionalmente, tener varios ítems abiertos a la vez.
Se recomienda cuando las personas necesitan consultar o comparar información.
- Duración sugerida: 45 a 60 minutos
- Recomendado para visitas individuales o espontáneas
- Duración aproximada: 60 minutos
- Incluye paradas y conversación durante el recorrido
- Recomendado para quienes buscan una experiencia más guiada
- Duración sugerida: 45 a 60 minutos
- Recomendado para visitas individuales o espontáneas
- Duración aproximada: 60 minutos
- Incluye paradas y conversación durante el recorrido
- Recomendado para quienes buscan una experiencia más guiada
Abierto inicialmente
Un ítem puede presentarse abierto inicialmente para destacar
Abre de entrada el ítem que la mayoría de las personas necesita leer primero.
- Duración sugerida: 45 a 60 minutos
- Recomendado para visitas individuales o espontáneas
- Duración aproximada: 60 minutos
- Incluye paradas y conversación durante el recorrido
- Recomendado para quienes buscan una experiencia más guiada
- Duración sugerida: 45 a 60 minutos
- Recomendado para visitas individuales o espontáneas
- Duración aproximada: 60 minutos
- Incluye paradas y conversación durante el recorrido
- Recomendado para quienes buscan una experiencia más guiada
Ícono de inicio
El encabezado puede incorporar un ícono opcional antes del título.
Debe utilizarse solo cuando aporte reconocimiento o contexto adicional.
Acércate a cualquier sucursal ChileAtiende con tu cédula de identidad vigente.
Llama al 101 de lunes a viernes, de 9:00 a 18:00 horas.
Escríbenos desde el formulario de contacto y te responderemos en un plazo de 5 días hábiles.
Acércate a cualquier sucursal ChileAtiende con tu cédula de identidad vigente.
Llama al 101 de lunes a viernes, de 9:00 a 18:00 horas.
Escríbenos desde el formulario de contacto y te responderemos en un plazo de 5 días hábiles.
Cuándo usarlo
Úsalo para contenido secundario o de consulta: preguntas frecuentes, requisitos, bases legales o ayudas dentro de un trámite.
Buenas prácticas
Recomendado: Usa títulos breves y descriptivos
El encabezado debe anticipar claramente qué encontrará la persona al abrirlo.
Recomendado: Permite múltiples secciones abiertas cuando ayude a comparar
Mantén más de un panel abierto cuando sea útil consultar o contrastar información relacionada en paralelo.
Malas prácticas
No recomendado: No ocultes información crítica
Evita esconder plazos, requisitos obligatorios, costos, condiciones de acceso o información relevante para ejercer la tarea. La persona no debería tener que descubrir información esencial abriendo secciones.
No recomendado: No anides acordeones
No uses acordeones dentro de acordeones. Esto dificulta comprender la estructura de la información y aumenta el esfuerzo de navegación, especialmente en contenidos extensos del Estado.
Recomendaciones de accesibilidad
Comunica el estado del panel
Cada encabezado debe funcionar como un <button> y comunicar si está abierto o cerrado mediante aria-expanded.
Permite operar con teclado
Debe poder abrirse y cerrarse mediante Enter o Espacio.
Mantén el foco visible
Mantén siempre visible el estado de focus durante la navegación por teclado.
Evita foco en contenido oculto
El contenido cerrado (hidden) no debe recibir foco hasta que el panel se abra.
Oculta íconos decorativos
El chevron y otros íconos decorativos (__chevron, __leading) deben ocultarse de las tecnologías de asistencia con aria-hidden="true".
Usa títulos autosuficientes
El título (__title) debe describir la sección por sí mismo, sin depender del ícono o del estado visual.
Última actualización: Octubre de 2026