Acordeón
Biblioteca de componentes
Cómo utilizar este componente
El componente de acordeón crea secciones de contenido contraíbles para ayudar a organizar el contenido y reducir el desplazamiento. Es perfecto para preguntas frecuentes y listas secuenciales, ya que proporciona una agrupación lógica y organización del contenido relacionado.
Un componente de acordeón es una lista apilada verticalmente que, cuando se selecciona, permite a los usuarios navegar a través de la información revelando u ocultando secciones de contenido.
Anatomía del acordeón
- Botones de expansión/contracción
- Título
- Descripción
- Icono
Muestra
Rúbrica 3
Se trata de un acordeón de marcador de posición que muestra cómo funciona el componente Acordeón.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Encabezado 4
- Ut enim ad minim veniam quis nostrud
- Exercitation ullamco laboris nisi ut aliquip
- Ex ea commodo consequat
- Duis aute irure dolor in reprehenderit
- Voluptate velit esse cillum
- Dolore eu fugiat nulla pariatur
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Prácticas recomendadas
- Habilite "Expandir/Contraer todo" para acordeones con más de tres títulos o áreas de contenido grandes para facilitar la visualización.
- Las páginas cortas con un desplazamiento mínimo son adecuadas para contenido limitado, especialmente en dispositivos móviles.
- Utilícelo para agrupar u organizar lógicamente el contenido relacionado.
- Proporcione etiquetas claras y descriptivas para cada título.
- Use títulos significativos para cada título de acordeón.
- Usa párrafos y encabezados para organizar el contenido largo.
- No ocultes información crítica dentro del acordeón.
- No incrustes vídeos, imágenes ni otros tipos de contenido multimedia.
- No abrumes a los usuarios con demasiadas secciones de acordeón.
- No anides acordeones dentro de acordeones.
Colocación
- Se utiliza mejor en áreas de contenido principal más anchas en lugar de columnas laterales estrechas.
- Los acordeones se pueden colocar debajo de otros componentes, como el componente Tab.
Características del acordeón
- Haga clic en el botón "Agregar" en la parte inferior para agregar elementos adicionales en el acordeón
- Para reordenar las secciones de acordeón, arrastre y suelte con el icono situado junto al título.
Consideraciones de accesibilidad
Autores:
- Priorice el flujo de usuarios y la jerarquía de información al decidir la ubicación del acordeón.
- Considere la posibilidad de crear subpáginas si el número de acordeones en una página es excesivo o si se incluyen varios párrafos en acordeón.
- Asegúrate de que los títulos de acordeón den una idea clara de lo que hay dentro y que cada uno sea único.
Desarrolladores:
- Cada acordeón debe ser
- Intro, Espacio o toque debe expandir o contraer el acordeón
- El título debe funcionar como un botón, no solo como el icono del acordeón.
- Los elementos interactivos dentro del acordeón deben integrarse automáticamente en el orden de tabulación
- Las acciones de expansión y contracción de acordeones funcionan de forma independiente. Al abrir un acordeón no se debe cerrar otro.
| Llaves | Acción |
| Espaciar o Entrar | Expanda y contraiga la sección. |
| Pestaña | Mueve el foco al siguiente elemento enfocable. |
| Mayús + Tabulador | Mueve el foco al elemento enfocable anterior. |
Lista de verificación del coordinador web
- Mantenga un estilo visual coherente en todos los acordeones para un diseño cohesivo.
- Asegúrese de que el acolchado y el espaciado sean adecuados para facilitar la lectura.
- Debe ser conciso, claro, significativo y descriptivo.
- Siga las prácticas recomendadas de texto:
- Use negrita para enfatizar, no para encabezados/subtítulos.
- Use la cursiva con moderación para un énfasis sutil.
- Evite subrayar para evitar confusiones con los hipervínculos.
- Utilice el botón Justificar para ajustar la alineación del contenido cuando sea necesario.
- Utilice el botón "Listas" para listas con viñetas y listas numeradas.
- Las listas con viñetas mejoran la legibilidad y la organización del contenido.
- Las listas numeradas son ideales para contenido detallado.
- Utilice los botones "Sangría" en Listas para subviñetas o elementos numerados.
- Utilice el botón Vincular para vincular una página
- Al seleccionar una página interna dentro de TxDOT.gov, asegúrese de usar el selector de ruta para elegir la ruta de la página.
- Al vincular a un enlace externo, use el menú desplegable y seleccione "Nueva pestaña".
- Utilice el botón Párrafo para seleccionar h2-h6 según corresponda para los títulos y subtítulos dentro del acordeón.