Accordion accessibile e riutilizzabile utilizzando solo il tag <details> e il 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
Progetto: 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>?
#

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.

<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à:

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#

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
#

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.

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.

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

Come annunciano i lettori di schermo il tag <details>?#

1. Quando l’elemento è compresso.

   

2. Quando l’elemento è espanso.

   

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