# Accordion accessibile e riutilizzabile utilizzando solo il tag <details> e il CSS

> Impara come creare un componente Accordion accessibile e riutilizzabile utilizzando solo il tag <details> e il CSS.

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

[Read the original on micaavigliano.com](https://micaavigliano.com/it/blog/accordion-accessibile-e-riutilizzabile-utilizzando-solo-il-tag-details-e-css)

---

Benvenuti a una nuova puntata della mia sezione dedicata alla creazione di **componenti riutilizzabili** e, soprattutto, **accessibili**. Questa volta impareremo come utilizzare il tag HTML `<details>` per creare un accordion.  

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

Per rendere il nostro accordion accessibile, dobbiamo tenere conto dei seguenti punti:  

-   Quando il focus è sull’intestazione delle accordion, deve essere possibile comprimerla o espanderla premendo i tasti **Invio** o **Spazio**.
-   Premendo **Tab**, il focus si sposta alle accordion successiva o al successivo elemento interattivo all’interno delle accordion.
-   Premendo **Shift + Tab**, il focus si sposta all’elemento interattivo precedente.
-   Il lettore di schermo deve annunciare lo stato dell’elemento, cioè se è compresso o espanso. Deve inoltre annunciarne il nome accessibile.  
      
    

Il tag `<details>` ci aiuterà a soddisfare tutti questi punti, poiché è accessibile in modo nativo di default.  

### [Come si utilizza il tag `<details>`?  
](#come-si-utilizza-il-tag-details)

Il tag `<details>` è un tag strutturale nativo di HTML utilizzato per creare un elemento che può essere espanso o compresso. All’interno di questo tag troviamo il tag `<summary>`, che viene usato come intestazione e funge da controllo per espandere o comprimere il contenuto. Infine, il contenuto da mostrare viene posizionato dopo il tag `<summary>`e può essere qualsiasi elemento HTML valido.  

## Blocco di codice

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

Ora che abbiamo imparato com’è strutturato il tag `<details>` e a cosa serve, andremo a creare il nostro componente riutilizzabile.  
Per prima cosa, parliamo delle proprietà che il componente riceverà:  

## Blocco di codice

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

-   `title` sarà la nostra intestazione all’interno del tag `<summary>`.
-   `children` sarà il contenuto da mostrare. Può ricevere una stringa o un ReactNode.
-   `icon` sarà l’icona che sostituirà l’icona nativa contenuta nell’elemento`<details>`.
-   `name` è opzionale e sarà il valore assegnato all’attributo name, di cui parleremo in seguito.  
    

## [Attributo `name`](#attributo-name)

Il tag `<details>` accetta l’attributo name, che viene utilizzato affinché, se ci sono più tag `<details>`, gli elementi si comportino come un gruppo. In altre parole, se un accordion è aperta e se ne apre un’altra, quella aperta in precedenza si chiude automaticamente.

### [Come rimuovere la freccia nativa del componente  
](#come-rimuovere-la-freccia-nativa-del-componente)

Per rimuovere la freccia nativa, dobbiamo tenere a mente due regole: per prima cosa, con il selettore summary, impostiamo `list-style: none` per eliminare la freccia in alcuni browser.  

## Blocco di codice

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

Per rimuovere la freccia nei browser come Chrome e Safari, utilizzeremo la proprietà `-webkit-details-marker`.  

## Blocco di codice

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

### [Come annunciano i lettori di schermo il tag `<details>`?](#come-annunciano-i-lettori-di-schermo-il-tag-details)

1.  Quando l’elemento è compresso.
    
    Immagine del lettore di schermo VoiceOver che annuncia: Fisarmonica 3, compresso, gruppo
    
2.  Quando l’elemento è espanso.
    
    Immagine del lettore di schermo VoiceOver che annuncia: Fisarmonica 3, espanso, gruppo
    

E fatto! Con tutte queste modifiche e zero JavaScript, abbiamo ora un accordion completamente funzionante e al 100% accessibile.  
Spero che queste informazioni vi siano utili e fatemi sapere se c’è qualcosa in particolare che vorreste imparare sull’accessibilità o se c’è un componente specifico che vi incuriosisce, così possiamo lavorarci in questa sezione.  
  

Micaela Avigliano