Respuesta corta: el elemento details muestra una línea de resumen que la gente pulsa, toca o activa con Enter para abrir o cerrar el contenido de debajo. No necesita JavaScript. Si varios details comparten el mismo atributo name, solo se abre uno a la vez, y eso es un acordeón.
Qué hacen details y summary
MDN describe details como un widget desplegable: su información solo se ve cuando el widget pasa al estado abierto. El elemento summary pone la etiqueta, y al pulsarlo se abre o se cierra su details.
Sin summary, el navegador usa una etiqueta por defecto, normalmente «Details». MDN añade que el contenido del details sirve de descripción accesible para su summary.
Details, un desplegable o un acordeón
| Opción | Qué es | Cuándo encaja |
|---|---|---|
| details y summary | Un widget desplegable que trae el navegador | Una o pocas secciones que se abren cuando hace falta |
| details con un name compartido | Details agrupados, solo uno abierto a la vez | Un acordeón sin código |
| Patrón desplegable del W3C | Un botón con aria-expanded que muestra y oculta contenido | Un comportamiento que el elemento no da |
| Patrón de acordeón del W3C | Encabezados apilados que funcionan como botones | Secciones cuyos títulos deben ser encabezados de verdad |
De MDN y del W3C (guía de prácticas de autoría), en inglés, consultados el 5 de noviembre de 2026.
Un name compartido conecta varios elementos details para que abrir uno cierre el otro, y así tienes un acordeón sin código.
Cómo funciona con el teclado y los lectores de pantalla
Pulsar Enter sobre un summary con el foco muestra u oculta el contenido. web.dev avisa de que Safari no incluye los details en el orden del foco del teclado, así que pruébalo ahí.
El patrón desplegable del W3C fija las reglas para los widgets propios: Enter y Espacio muestran u ocultan el contenido, y el control lleva aria-expanded, en true cuando el contenido se ve y en false cuando está oculto. Nuestra guía de aria-expanded muestra dónde va y qué teclas lo cambian. Nuestra guía de qué es ARIA cuenta en qué casos un control propio necesita ARIA.
Dar estilo al marcador sin romper el nombre
Un summary se muestra como un elemento de lista, así que las propiedades list-style pueden cambiar o quitar el triángulo, y display en block también lo quita. En navegadores WebKit como Safari lo controla el pseudoelemento ::-webkit-details-marker.
Si dibujas tu propio signo con la propiedad content de CSS, puede acabar en lo que dice el lector de pantalla. MDN describe un texto alternativo para el contenido generado: una barra y una cadena después del contenido, que el lector lee en lugar del signo. Una cadena vacía deja el signo en silencio.
Cómo hacer un acordeón con details
- Envuelve cada sección en un elemento details y pon su título en un summary como primer hijo.
- Haz que el texto del summary sea corto y concreto, porque es el nombre que se oye.
- Dales el mismo atributo name a los details de un grupo si solo debe haber uno abierto a la vez.
- Añade el atributo open a la sección que deba empezar abierta.
- Cambia o quita el marcador con list-style, y oculta ::-webkit-details-marker para Safari.
- Dale un texto alternativo vacío a cualquier signo que dibujes con content.
- Prueba con Tab, Enter y Espacio, también en Safari; la prueba completa está en nuestra guía de navegación con teclado.
Qué encontramos en nuestras preferencias de cookies
El 5 de noviembre de 2026 abrimos nuestras preferencias de cookies desde el pie, en los dos idiomas, en pantalla ancha y en pantalla estrecha. Pliegan la lista de cookies de cada categoría en un elemento details, cuatro en total.
Con el teclado funcionaba como debe. El primer Tab llegó a un summary, Enter lo abrió y Espacio lo cerró, y Chrome anunció la lista como expandida o contraída cada vez.
El nombre necesitaba un ajuste. Los signos de más y de menos que dibuja nuestro CSS formaban parte de él, así que un lector de pantalla oiría «más Cookies y almacenamiento» cerrado y «menos» abierto. Les dimos un texto alternativo vacío: se siguen viendo, y el nombre queda «Cookies y almacenamiento (9)» en los dos estados. En Chrome, Firefox y WebKit los signos se ven exactamente igual que antes.
Antes de publicar
- Cada elemento details empieza con un summary.
- Cada summary dice qué contiene la sección.
- Los details agrupados que deben abrirse de uno en uno comparten name.
- Enter abre y cierra cada summary.
- Las secciones que deben empezar abiertas llevan el atributo open.
- Los signos decorativos dibujados con CSS tienen texto alternativo vacío.
RecuerdaDeja que el navegador abra y cierre. Tu trabajo es un summary claro, sin nada decorativo en su nombre, y una prueba en cada navegador.
Si una sección debe plegarse o no es una decisión de contenido; nuestra guía de la página de preguntas frecuentes explica por qué dejamos nuestras respuestas abiertas. En nuestro servicio de diseño web cuidamos controles como estos.
Respuestas rápidas sobre details y summary
¿Qué hace el elemento details?
Crea un widget desplegable: una línea de resumen que la gente pulsa para mostrar u ocultar el contenido que hay debajo. Sin summary, el navegador muestra una etiqueta por defecto, normalmente «Details», así que escribe siempre la tuya.
¿Cómo hago un acordeón con details?
Dale el mismo atributo name a varios elementos details. MDN explica que así solo uno de los elementos agrupados puede estar abierto a la vez, de modo que abrir uno cierra el otro, sin ningún código.
¿Details y summary funcionan con el teclado?
Sí, en la mayoría de los navegadores: el Tab llega al summary y Enter lo abre o lo cierra. Safari es la excepción que señala web.dev, porque deja los details fuera del orden del foco del teclado.
¿Cómo quito el triángulo de un summary?
Pon list-style en none en el summary, o display en block, y en navegadores WebKit como Safari oculta el pseudoelemento ::-webkit-details-marker. Si dibujas tu propio signo con CSS, dale un texto alternativo vacío.
¿Cuándo uso el patrón de acordeón del W3C?
Cuando cada encabezado tiene que ser un encabezado de verdad o necesitas un comportamiento que el elemento no da. El patrón del W3C usa botones dentro de encabezados, con aria-expanded en true o false según se abre o se cierra cada sección.
Fuentes
Consultadas el 5 de noviembre de 2026. MDN Web Docs: details. web.dev: Detalles y resumen. En inglés: MDN Web Docs, HTML disclosure summary element y content CSS property; Iniciativa de Accesibilidad Web del W3C, Accordion Pattern y Disclosure (Show/Hide) Pattern. Nuestro caso: nuestras propias páginas, leídas en un navegador el 5 de noviembre de 2026.