# Accordion accessible y reutilizable solo con la etiqueta <details> y CSS

> Aprende a crear un componente Accordion accesible y reutilizable usando solo la etiqueta <details> y CSS.

*By Micaela Avigliano — Frontend & Accessibility Engineer · Publicado 10 ago 2025*

[Read the original on micaavigliano.com](https://micaavigliano.com/es/blog/accordion-accessible-y-reutilizable-solo-con-la-etiqueta-details-y-css)

---

Bienvenides a una nueva entrada de mi sección dedicada a realizar **componentes reutilizables** y, sobre todo, **accesibles**. En esta ocasión vamos a aprender cómo utilizar la etiqueta HTML `<details>` para realizar un accordion o acordión.

**Repositorio**: [https://github.com/micaavigliano/accordion](https://github.com/micaavigliano/accordion)  
**Proyecto**: [https://accordion-accessible.netlify.app/](https://accordion-accessible.netlify.app/)  

Para que nuestro accordion sea accesible debemos tener en cuenta los siguientes puntos:

-   cuando el foco esta en el header del accordion debe poder colapsarse y expandirse presionando las teclas `enter` o `space`
-   al presionar `tab` el foco se mueve al siguiente accordion o al siguiente elemento interactivo dentro del accordion
-   al presionar `shift + tab` el foco se mueve al elemente interactivo anterior
-   el screen reader o lector de pantalla debe anunciar el estado del elemento, es decir, si esta colapsado o expandido. También debe anunciar su nombre accesible.  
      
    

La etiqueta `<details>` nos ayudará a pasar todos estos puntos, ya que de por sí es accesible de manera nativa.

### [¿Cómo utilizamos la etiqueta `<details>`?](#como-utilizamos-la-etiqueta-details)

La etiqueta `<details>` es una etiqueta nativa de HTML de estructura que se utiliza para crear un elemento que puedo ser expandido o colapsado. Dentro de esta etiqueta vamos a encontrar la etiqueta `<summary>` que se utiliza como encabezado que actúa como el control para expandir o colapsar el contenido. Por último, el contenido a mostrar se coloca después de la etiqueta `<summary>` y podrá ser cualquier elemento válido de HTML.

## Bloque de código

```
<details>
  <summary>Mostrar más</summary>
  <p>contenido</p>
</details>
```

Ahora que ya aprendimos cómo se conforma y para qué sirve la etiqueta `<details>` vamos a realizar nuestro componente reutilizable.  

Primero, vamos a hablar sobre las propiedades que el componente va a recibir:

## Bloque de código

```
interface AccordionProps {
  title: string;
  children: ReactNode | string;
  icon: ReactNode | string;
  name?: string;
}
```

-   `title` será nuestro encabezado dentro de la etiqueta `<summary>`.
-   `children` será el contenido a mostrar. Puede recibir un string o un ReactNode.
-   `icon` va a ser el ícono que va a suplantar el ícono nativo que contiene el elemento `<details>`.
-   `name` es una propiedad opcional que puede usarse para identificar el accordion.

### [Atributo `name`](#atributo-name)

La etiqueta `<details>` acepta el atributo name y se utiliza para, si hay más de una etiqueta `<details>`, que los elementos se comporten como un grupo. Es decir, si un accordion esta abierto y se abre otro, automáticamente el anterior se cierra.

### [Cómo sacar la flecha nativa del componente](#como-sacar-la-flecha-nativa-del-componente)

Para poder sacar la flecha nativa tenemos que tener dos reglas en cuenta primero con el selector summary vamos a colocar el `list-style: none` para eliminar la flecha en algunos navegadores.

## Bloque de código

```
details summary {
  cursor: pointer;
  position: relative;
  list-style: none;
}
```

Para eliminar la flecha en navegadores como Chrome y Safari vamos a utilizar la propiedad `-webkit-details-marker`

## Bloque de código

```
details summary::-webkit-details-marker {
  display: none;
}
```

### [¿Cómo anuncian los lectores de pantalla la etiqueta `<details>`?](#como-anuncian-los-lectores-de-pantalla-la-etiqueta-details)

1.  Cuando el elemento esta colapsado
    
    Imagen del lector de pantalla voice over que anuncia: Accordion 3, colapsado, grupo
    
2.  Cuando el elemento esta expandido
    
    Imagen del lector de pantalla voice over que anuncia: Accordion 3, expandido, grupo
    

y, ¡Listo! Ya con todos estos cambios y cero javascript tenemos un Accordion funcionando y 100% accesible.  
Espero que esta información les sirva y comentenme si hay algo en particular que les gustaría aprender sobre accesibilidad o si hay algún componente en particular que les llama la atención para poder trabajar en esta sección.  
  

¡Hasta la próxima!  
Micaela Avigliano