Cuando el contenido debería estar disponible bajo demanda, los detalles y el resumen proporcionan un control de divulgación incorporado. El navegador maneja el estado abierto, la activación del teclado y la semántica expandida.

<details>
  <summary>What does this setting do?</summary>
  <p>It changes how the page displays the selected content.</p>
</details>

Mantenga el resumen útil

  • Haga del resumen una descripción concisa del contenido oculto.
  • Coloque el resumen como la primera hija de los detalles.
  • No incluya un enlace, botón u otro control interactivo dentro del resumen.

Utilice un grupo sólo cuando encaje

El atributo de nombre puede hacer que un grupo de detalles se comporte como un conjunto donde al abrir uno se cierra otro. Esto es útil para paneles de preguntas frecuentes de apertura única, pero no cuando los lectores pueden querer razonablemente que se abran varias secciones juntas.

Prefiera el elemento nativo a una divulgación personalizada cuando su comportamiento coincida con el diseño. Agregue estilo a la semántica en lugar de reconstruir el control con contenedores genéricos en los que se puede hacer clic.