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

Benvenutə 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.