Una web de alquiler de herramientas presenta todas sus respuestas dentro de bloques cerrados. Para comparar condiciones de entrega y devolución, la persona abre uno, pierde el anterior y debe recordar lo que decía. El acordeón ahorra espacio visible, pero puede añadir trabajo cuando la información necesita leerse junta. Elegir entre contenido abierto y desplegable es una decisión de interacción. Después de escoger el patrón, hay que comprobar que pueda recorrerse, abrirse y comprenderse con diferentes formas de navegación, no solo mediante un clic.
Decide qué información necesita permanecer abierta
Observa la tarea que realiza el visitante y cuáles respuestas necesita relacionar. Si compara varias condiciones o sigue una secuencia, mantener el contenido abierto puede facilitar la lectura. Los desplegables pueden servir para consultas independientes que solo algunas personas necesitan ampliar. No escondas información decisiva únicamente para conseguir una página más corta. Una sección con tres respuestas breves quizá no necesite controles adicionales. Prepara una versión abierta y otra desplegable con el mismo contenido y plantea una búsqueda concreta. Evalúa cuánto contexto debe recordar la persona y si consigue comparar las respuestas sin abrir y cerrar repetidamente.
Haz que cada encabezado funcione como una invitación clara
El texto visible antes de abrir debe anticipar la información que aparecerá. Usa preguntas o títulos descriptivos y evita etiquetas repetidas como Más información. El área activable debe ser fácil de reconocer y suficiente para pulsar sin precisión extrema. Una flecha puede indicar expansión, pero no sustituye el nombre ni la comunicación del estado. El elemento nativo details ofrece un mecanismo de revelación mediante summary. Si se construye un acordeón personalizado, el patrón de WAI explica relaciones y estados que el equipo debe implementar. Elegir una biblioteca visual no elimina la necesidad de comprobar esos comportamientos.
Revisa apertura, foco y lectura mediante teclado
Llega a cada control con el teclado y comprueba que el foco sea visible. Actívalo y verifica que el contenido se abra sin desplazar el foco hacia un lugar inesperado. Después recorre los enlaces o controles que contenga la respuesta. Cierra el bloque y confirma que elementos ocultos no queden disponibles como si todavía se vieran. En una revisión con lector de pantalla, comprueba que el nombre y el estado expandido o contraído se comuniquen. Los encabezados también necesitan una jerarquía comprensible. El objetivo es que la interacción conserve sentido más allá de la apariencia de una flecha girada.
Prueba comparaciones, ampliación y contenido extenso
Decide si pueden permanecer varias respuestas abiertas según las tareas previstas. Cerrar automáticamente la anterior puede estorbar una comparación. Prueba una respuesta larga, un enlace y un título que ocupe varias líneas en móvil. Aumenta el tamaño del texto y revisa que el control no corte palabras ni tape contenido. Si una página enlaza directamente a una respuesta, comprueba qué se muestra al llegar y cómo se identifica el destino. Revisa además la impresión si forma parte del uso esperado. Documenta los casos comprobados para que futuras ediciones no introduzcan contenido que el patrón ya no maneje bien.
DE LA LECTURA A LA ACCIÓN
Para aplicar hoy
- Usa contenido abierto cuando la tarea requiera comparar o seguir información continua.
- Comprueba nombres, estados y foco además del aspecto visual del acordeón.
- Prueba respuestas largas, enlaces y lectura móvil con el componente implementado.
Fuentes y referencias
Documentación para profundizar. Los ejemplos de esta guía son didácticos.