Le card sono elementi fondamentali nel web design contemporaneo, utilizzate per presentare informazioni in blocchi autonomi e facilmente scansionabili. Tuttavia, la creazione di card che siano sia visivamente accattivanti sia accessibili per utenti che utilizzano tecnologie assistive (come gli screen reader) richiede particolare attenzione. Una card ben progettata deve stabilire una chiara gerarchia visiva ed essere strutturata in modo che il focus da tastiera segua un ordine logico, evitando il problema comune delle card interamente cliccabili che creano ostacoli alla navigazione.

In questa implementazione proponiamo una struttura semantica basata sul tag <article> per denotare l'indipendenza del contenuto. Il titolo principale utilizza un livello di intestazione coerente con la pagina, mentre le informazioni meta (come tempo di lettura o livello di difficoltà) sono formattate tramite una lista di descrizione (<dl>), ideale per associare coppie di chiavi e valori in modo semantico. La chiamata all'azione (CTA) è un link esplicito, che funge da destinazione primaria della card.

L'interattività secondaria, come il pulsante per salvare o preferire l'elemento, è gestita in modo accessibile tramite un elemento <button> con l'attributo aria-pressed per comunicare lo stato di attivazione o salvataggio (vero o falso). Questo assicura che gli screen reader annuncino correttamente lo stato del pulsante senza affidarsi esclusivamente a cambiamenti visivi di colore o icona, garantendo un'esperienza inclusiva per chiunque.