Acordeón
Biblioteca de componentes
Cómo usar 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 una organización del contenido relacionado.
Un componente de acordeón es una lista apilada verticalmente que, cuando se selecciona, permite a los usuarios navegar por 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.
- Úselo para agrupar u organizar lógicamente contenido relacionado.
- Proporcione etiquetas claras y descriptivas para cada título.
- Use títulos significativos para cada título de acordeón.
- Use párrafos y encabezados para organizar contenido largo.
- No oculte información crítica dentro del acordeón.
- No insertes vídeos, imágenes u otros tipos de medios.
- No abrume a los usuarios con demasiadas secciones de acordeón.
- No anide acordeones dentro de acordeones.
Colocación
- Se utiliza mejor en áreas de contenido principal más amplias 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 usando el icono 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úrese de que los títulos de los acordeones den una idea clara de lo que hay dentro y que cada uno sea único.
Desarrolladores:
- Cada acordeón debe ser
- Entrar, Espacio o tocar 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 operan de forma independiente. Abrir un acordeón no debe cerrar otro.
| Llaves | Acción |
| Espacio 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 consistente en todos los acordeones para un diseño cohesivo.
- Asegura un acolchado y espaciado 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 cursiva con moderación para un énfasis sutil.
- Evite subrayar para evitar confusiones con los hipervínculos.
- Utilice el botón de justificación para ajustar la alineación del contenido cuando sea necesario.
- Use 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.
- Usar 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 rutas 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 en consecuencia para los títulos y subtítulos dentro del acordeón.