Acordeón en la página: cuándo plegar contenido ayuda a leer

Pliega contenido en un acordeón cuando la persona va a necesitar pocas partes de la página, cada parte se sostiene sola y el título de cada bloque dice qué hay dentro. Si va a leer casi todo, o si el texto es corto, déjalo abierto (NN/g, Accordions on Desktop (en inglés)). En el código, el par <details> y <summary> de HTML ya abre y cierra sin ningún script (MDN, el elemento details).

Qué cuenta como acordeón

Un acordeón es el bloque que muestra solo un título y revela el contenido cuando alguien hace clic en él. Tiene tres piezas: el título, un ícono que indica si está abierto o cerrado y el panel con el contenido oculto (NN/g (en inglés)).

La diferencia con una ventana superpuesta está en dónde aparece el contenido. El acordeón se abre en el propio flujo y empuja el resto de la página hacia abajo, sin tapar nada (NN/g, Accordions on Mobile (en inglés)).

Cuándo plegar ayuda

El artículo de 2023 de NN/g enumera los casos en que el acordeón compensa (NN/g (en inglés)):

La persona quiere pocas partes. Si va a saltarse casi todo, esconder el resto le ahorra tiempo.
La tarea sigue pasos. Un checkout por etapas muestra solo el paso actual y abre el siguiente cuando el anterior está completo.
Las partes son independientes. Las páginas de preguntas frecuentes y los detalles de producto entran aquí, porque nadie necesita dos secciones una al lado de la otra.
La pantalla es pequeña y el texto es largo. En el celular, plegar deja la página con un largo que se puede recorrer.

En el celular, la mayor ganancia es la vista general. Los títulos cerrados funcionan como un índice de la página, y la persona ve de una vez qué hay ahí antes de elegir dónde entrar (NN/g (en inglés)). Sin eso, se desplaza, no lo encuentra y se va, aunque la respuesta estuviera más abajo.

Cuándo plegar estorba

La misma fuente señala los casos en que lo mejor es mostrarlo todo (NN/g (en inglés)):

La persona necesita la mayor parte. Abrir bloque por bloque se vuelve trabajo, y la página larga sale más barata.
Hay poco contenido. Con todo cerrado, la página parece vacía y da la impresión de que no tiene nada útil.
La jerarquía es profunda. Un acordeón dentro de otro hace que la persona pierda el lugar. Las pestañas o un menú lateral sirven mejor.
El contenido no cabe en un título. Si el bloque no se puede resumir en pocas palabras, nadie sabe si vale la pena abrirlo.
Es un texto para leer de principio a fin. Una noticia o un relato pierden el hilo cuando se cortan en bloques.

Hay costos que aparecen en cualquier caso. Cada bloque que se abre pide mirar, decidir y hacer clic. Lo que queda cerrado puede pasar inadvertido. Y la página impresa sale con los bloques cerrados, salvo que el sitio los abra todos antes de imprimir (NN/g (en inglés)).

La señal de que el bloque se abre

Un título suelto parece un enlace a otra página. En 2020, NN/g lo probó con 136 personas en el celular, en menús con cuatro opciones de ícono y una versión sin ícono (NN/g, Accordion Icons (en inglés)). La flecha hacia abajo, que gira al abrir, fue la opción más segura.

Sin ícono, o con un ícono inventado, la gente esperaba salir de la página. El signo de más y la flecha hacia la derecha no fueron mejores que la falta de ícono en ese punto (NN/g (en inglés)).

El mismo estudio mostró que los toques se reparten entre el texto y el ícono. Incluso con la flecha hacia abajo, el 29% de los toques cayó en el texto (NN/g (en inglés)). Por eso, texto e ícono tienen que hacer lo mismo. Que el texto lleve a otra página y el ícono abra el bloque confunde a quien toca.

Qué tiene que hacer el código

<details> resuelve lo básico. El atributo open define si el bloque empieza abierto (MDN). En la versión en inglés de esa referencia, MDN describe el atributo name: los bloques con el mismo nombre forman un grupo en el que solo uno queda abierto (MDN, details (en inglés)).

Quien arma el acordeón con otros elementos tiene que rehacer lo que el navegador daría listo. El patrón del W3C pide que el título de cada bloque sea un botón dentro de un encabezado del nivel adecuado. El botón informa su estado en aria-expanded y se abre con Enter o Espacio (W3C, Accordion Pattern (en inglés)).

La búsqueda en la página es otro punto. En un acordeón común, el texto cerrado no aparece al buscar en la página, y un enlace a un fragmento suyo no funciona. Desde Chrome 102, el atributo hidden="until-found" deja que el navegador encuentre ese texto y abra el bloque por sí solo (Chrome for Developers, hidden=until-found). La misma página advierte que el bloque igual tiene que abrirse con un clic, porque no todos los navegadores entienden el atributo.

En el celular: el botón Atrás

Un problema propio del celular es la desorientación. Cuando el sitio desplaza la página para llevar el bloque abierto arriba, la persona cree que cambió de página. Toca Atrás para cerrarlo y sale de la página entera (NN/g (en inglés)).

NN/g propone dos salidas. Una es tratar la apertura como un enlace interno, para que Atrás cierre el bloque. La otra es no desplazar nada al abrirlo. Para bloques muy largos, un título que queda fijo arriba mientras la persona se desplaza permite cerrarlo sin volver a subir todo (NN/g (en inglés)). En las pruebas que describe el artículo, nadie entendió un botón que decía “Collapse”, algo como “plegar”.

Cómo lo hice en kahue.net

En mi página sobre mí, tres bloques empiezan cerrados: el resto de las certificaciones, la experiencia anterior y la formación con idiomas. Los tres puestos más recientes aparecen abiertos. Lo que es de consulta queda plegado, y lo que se lee primero queda a la vista.

Cada barra cerrada dice qué tiene dentro sin necesidad de abrirla. La de las credenciales muestra “51 certificados y cursos”, y la de la experiencia muestra “2015-2024 · 10 puestos”. El rango de años sale del propio dato, así que se ajusta cuando entra un puesto nuevo.

Usé <details> y <summary> a propósito. Los bloques se abren sin JavaScript, y el contenido cerrado sigue en el HTML, así que los buscadores y los lectores de currículum lo leen todo. La barra tiene fondo, sombra y una flecha hacia abajo en el color de acento, que gira al abrir. Lo hice así porque una línea de texto suelta no muestra que se puede hacer clic.

JavaScript solo entra para dos cosas que el elemento no hace por sí mismo. Un enlace que llega con la dirección del bloque, como #experiencia-anterior, lo abre. Y antes de imprimir, todos los bloques se abren, para que el PDF no salga cortado. Los bloques no tienen name, así que se pueden abrir varios a la vez.

Según la lista de NN/g, falta un botón para abrir todo. Frente al patrón del W3C, el orden está invertido: el <h2> de la formación queda dentro del <summary>, y no el botón dentro del encabezado.

Dónde las fuentes no coinciden

El propio NN/g cambia de tono según la pantalla. El texto de 2015 sobre celulares dice que el acordeón es uno de los elementos más útiles ahí (NN/g (en inglés)). El de 2023 sobre escritorio dice que su uso no siempre se recomienda y enumera más casos en contra que a favor (NN/g (en inglés)).

El ícono también divide. El artículo de 2023 dice que la flecha hacia abajo y el signo de más funcionan mejor (NN/g (en inglés)). El estudio de 2020 encontró que el signo de más no supera la falta de ícono (NN/g (en inglés)). La flecha hacia abajo es el punto en que ambos coinciden.

Por último, el grupo en que solo un bloque se abre. MDN presenta el atributo name como la forma de hacer acordeones sin script (MDN (en inglés)). NN/g pide que la persona pueda abrir varios a la vez, porque cerrar uno automáticamente impide comparar dos bloques (NN/g (en inglés)). El recurso existe, pero usarlo o no depende de la tarea.

El error común: esconder lo que la persona vino a buscar

El tropiezo más frecuente es plegar justo la información más importante. El ejemplo de NN/g es un sitio del gobierno de Estados Unidos que dejó las reglas sobre el uso de mascarilla dentro de un bloque cerrado (NN/g (en inglés)). El texto era corto y cabía abierto en la página.

La pregunta que separa los casos es sencilla. Si casi todos los que llegan lo necesitan, déjalo abierto. El acordeón sirve para lo que solo una parte de la gente busca, como las respuestas de una página de preguntas frecuentes.